面試官：Redux-Toolkit 是什么
Redux Toolkit（RTK）是 Redux 官方推薦的 狀態(tài)管理庫，它簡化了 Redux 的開發(fā)流程，使 Redux 更簡單、更高效。
為什么需要 Redux Toolkit？
- 簡化 Redux 代碼（減少 boilerplate 代碼）
- 自動優(yōu)化狀態(tài)更新（內置 Immer.js，支持 可變寫法）
- 內置異步處理（Redux Thunk）
- 性能優(yōu)化（自動 reducer 組合，支持 lazy loading）
Redux Toolkit vs 傳統(tǒng) Redux
特性 | 傳統(tǒng) Redux | Redux Toolkit |
Reducer 書寫 | 需要手寫 switch-case | 直接用 createSlice |
異步處理 | 需手寫 redux-thunk | 內置 createAsyncThunk |
狀態(tài)更新 | 需手寫不可變數據更新 | 支持可變寫法 （Immer.js） |
Store 配置 | 需手寫 combineReducers、applyMiddleware | configureStore 自動配置 |
默認優(yōu)化 | 需手動優(yōu)化性能 | 自動優(yōu)化 （reselect、RTK Query） |
Redux Toolkit 基本使用
安裝 Redux Toolkit
npm install @reduxjs/toolkit react-redux創(chuàng)建 store
使用 configureStore 代替 createStore：
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});configureStore 自動整合 Reducer、Middleware，不需要手動配置。
創(chuàng)建 slice（Reducer + Action）
傳統(tǒng) 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;優(yōu)勢：
- **自動生成 action**（無需手寫 type）
- 支持可變寫法（內部使用 Immer.js）
組件中使用 Redux
使用 useSelector 讀取 Redux 狀態(tài)。
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 讀取狀態(tài)，dispatch 觸發(fā)更新。
Redux Toolkit 處理異步請求
使用 createAsyncThunk 處理異步請求。
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
// 創(chuàng)建異步 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>
);
}優(yōu)勢：
- createAsyncThunk 自動管理 loading 狀態(tài)。
- 不需要手寫 redux-thunk。
- extraReducers 處理異步狀態(tài)，代碼更清晰。
Redux Toolkit 還提供的高級功能
RTK Query（數據請求 & 緩存）
自動管理 API 數據請求、緩存、狀態(tài)。
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// 創(chuàng)建 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();優(yōu)勢：
- 自動緩存數據，避免重復請求。
- 支持 realtime polling（輪詢）。
- 支持 WebSocket 訂閱。
總結
Redux Toolkit 優(yōu)勢 | 化點 |
簡化 Redux 代碼 | createSlice 代替 reducer + action，減少 boilerplate |
自動優(yōu)化 store | configureStore 自動組合 reducer，優(yōu)化 middleware |
支持可變寫法 | 內置 Immer.js，state 可直接修改 |
內置異步處理 | createAsyncThunk 代替 redux-thunk，管理 loading |
支持 API 緩存 | RTK Query 自動緩存 API 請求數據 |
提高性能 | reselect + 自動 memoization，避免無效渲染 |
Redux Toolkit 是 Redux 的現代化解決方案，推薦用于 React + Redux 開發(fā)！
