Redux Toolkit (RTK) 是当今编写 Redux 的官方推荐方式。它消除了经典 Redux 臭名昭著的样板代码 — 手动 action types、action creators、不可变更新逻辑、store 设置 — 同时保留相同的核心原则。
RTK 解决的样板代码问题
js
= ;
= () => ({ : });
() {
(action.) {
: { ...state, : state. + };
: state;
}
}
import { createSlice, configureStore } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
// "mutating" code is SAFE — RTK uses Immer to produce immutable updates
increment: (state) => { state.value += 1; },
incrementBy: (state, action) => { state.value += action.payload; },
},
});
export const { increment, incrementBy } = counterSlice.actions; // action creators AUTO-generated
const store = configureStore({ reducer: { counter: counterSlice.reducer } });
createSlice 自动生成 action types 和 creators,并通过 Immer — 让你编写"可变"的 reducer 代码,该代码被安全地转换为不可变更新。一个简洁的 slice 替代了所有手动编写的部分。
configureStore → store setup with DevTools + thunk middleware preconfigured
createAsyncThunk → standard async (pending/fulfilled/rejected actions) for data fetching
createEntityAdapter → normalized state + CRUD reducers for collections
RTK Query → a full data-fetching/caching layer (like React Query, built into Redux)
export const fetchUsers = createAsyncThunk("users/fetch", () => api.getUsers());
// auto-dispatches users/fetch/pending | fulfilled | rejected — handle in extraReducers
✓ ~75% less code than classic Redux
✓ Immer → no manual immutable spread logic (fewer bugs)
✓ Good defaults (DevTools, thunk) out of the box
✓ Encourages best practices (slices, normalized data)
✓ RTK Query bundles server-state management
经典 Redux 最大的批评就是其样板代码;RTK 直接解决了这个问题,这就是为什么它现在是官方推荐以及在现代代码库中"使用 Redux"的含义。
理解 createSlice(Immer 驱动、自动生成的 actions)、createAsyncThunk(异步)、createEntityAdapter(规范化)和 RTK Query(服务器状态)对当代 Redux 工作至关重要 — 它保留了 Redux 的可预测性,同时消除了驱使许多团队转向替代方案的繁仪。