面試官：Redux-Toolkit 是什么，你知道嗎？
Redux Toolkit（RTK）是 Redux 官方推薦的 狀態管理庫，它簡化了 Redux 的開發流程，使 Redux 更簡單、更高效。
?? 為什么需要 Redux Toolkit？
- 簡化 Redux 代碼（減少 boilerplate 代碼）
- 自動優化狀態更新（內置 Immer.js，支持 可變寫法）
- 內置異步處理（Redux Thunk）
- 性能優化（自動 reducer 組合，支持 lazy loading）
?? Redux Toolkit vs 傳統 Redux
?? 特性 | 傳統 Redux | Redux Toolkit |
Reducer 書寫 | 需要手寫 | 直接用 |
異步處理 | 需手寫 | 內置 |
狀態更新 | 需手寫不可變數據更新 | 支持可變寫法 （ |
Store 配置 | 需手寫 |
自動配置 |
默認優化 | 需手動優化性能 | 自動優化 （ |
?? Redux Toolkit 基本使用
1?? 安裝 Redux Toolkit
npm install @reduxjs/toolkit react-redux2?? 創建 store
?? 使用 configureStore 代替 createStore：
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});? configureStore 自動整合 Reducer、Middleware，不需要手動配置。
3?? 創建 slice（Reducer + Action）
?? 傳統 Redux 需要寫 action + reducer，而 createSlice 一步搞定！
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; }, // ? 直接修改 state（內部使用 `Immer.js`）
decrement: (state) => { state.value -= 1; },
addByAmount: (state, action) => { state.value += action.payload; },
},
});
// 導出 Actions
export const { increment, decrement, addByAmount } = counterSlice.actions;
// 導出 Reducer
export default counterSlice.reducer;? 優勢：
- **自動生成 action**（無需手寫 type）
- 支持可變寫法（內部使用 Immer.js）
4?? 組件中使用 Redux
?? 使用 useSelector 讀取 Redux 狀態
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, addByAmount } from "./counterSlice";
function Counter() {
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch(increment())}>+1</button>
<button onClick={() => dispatch(decrement())}>-1</button>
<button onClick={() => dispatch(addByAmount(5))}>+5</button>
</div>
);
}
export default Counter;? 簡潔易懂！不需要 connect，直接 useSelector 讀取狀態，dispatch 觸發更新。
?? Redux Toolkit 處理異步請求
?? 使用 createAsyncThunk 處理異步請求
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
// 創建異步 Action（自動處理 `pending`, `fulfilled`, `rejected`）
export const fetchData = createAsyncThunk("data/fetchData", async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
return await response.json();
});
const dataSlice = createSlice({
name: "data",
initialState: { item: null, loading: false, error: null },
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => { state.loading = true; })
.addCase(fetchData.fulfilled, (state, action) => {
state.loading = false;
state.item = action.payload;
})
.addCase(fetchData.rejected, (state) => { state.loading = false; });
},
});
export default dataSlice.reducer;?? 組件中使用異步 Action
import { useSelector, useDispatch } from "react-redux";
import { fetchData } from "./dataSlice";
function DataComponent() {
const { item, loading } = useSelector(state => state.data);
const dispatch = useDispatch();
return (
<div>
{loading ? <p>Loading...</p> : <p>Data: {item?.title}</p>}
<button onClick={() => dispatch(fetchData())}>Fetch Data</button>
</div>
);
}? 優勢：
- createAsyncThunk 自動管理 loading 狀態
- 不需要手寫 redux-thunk
- extraReducers 處理異步狀態，代碼更清晰
?? Redux Toolkit 還提供的高級功能
1?? RTK Query（數據請求 & 緩存）
?? 自動管理 API 數據請求、緩存、狀態
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// 創建 API Slice
export const postApi = createApi({
reducerPath: "postApi",
baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com" }),
endpoints: (builder) => ({
getPosts: builder.query({ query: () => "/posts" }),
}),
});
// 自動生成 Hooks
export const { useGetPostsQuery } = postApi;?? 組件中直接調用 API
const { data, error, isLoading } = useGetPostsQuery();? 優勢：
- 自動緩存數據，避免重復請求
- 支持 realtime polling（輪詢）
- 支持 WebSocket 訂閱
?? 總結
Redux Toolkit 優勢 | ? 優化點 |
簡化 Redux 代碼 |
代替 |
自動優化 |
自動組合 |
支持可變寫法 | 內置 |
內置異步處理 |
代替 |
支持 API 緩存 |
自動緩存 API 請求數據 |
提高性能 |
+ 自動 |
?? Redux Toolkit 是 Redux 的現代化解決方案，推薦用于 React + Redux 開發！
