Redux Toolkit
最后更新：2026-10-28
Redux Toolkit Redux Toolkit
Redux Toolkit（RTK）是 Redux 官方推荐写法：createSlice 一步生成 reducer 与 action，configureStore 自动配好 devtools 与中间件，配合 Immer 让你「直接改」状态。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 第三方库 |
| 引入版本 | Redux Toolkit 2.x |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { configureStore, createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: { // Immer：可直接「修改」
inc: state => { state.value += 1 },
addAmount: (state, action) => { state.value += action.payload }
}
})
export const { inc, addAmount } = counterSlice.actions
export const store = configureStore({ reducer: counterSlice.reducer })⚙️ 参数
| action.payload | dispatch 时携带的数据：dispatch(addAmount(5)) 中 payload 即 5；由 createSlice 的 reducer 签名声明。 |
|---|
返回值：createSlice 返回 { reducer, actions }；configureStore 返回 store；组件中 useDispatch 取 dispatch，useSelector 选状态。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
三个按钮分别派发 inc / addAmount(10) / reset，数值随之变化——单一数据源 + dispatch 纯函数更新的 Redux 心智模型（useReducer 模拟演示）。💡 要点
💡 提示 createSlice 的 reducer 能「直接改」state 是因为内置 Immer 代理，实际产出仍是不可变更新；reducer 外不要手动改 state。
ℹ️ 说明 异步数据用 createAsyncThunk 或 RTK Query；后者把请求缓存也管理起来，可整体替代 useQuery。
⚠️ 注意 组件局部 UI 状态（输入框草稿、弹窗开关）放 Redux 是反模式，共享业务状态才进 store，局部状态留给 useState。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q RTK 和传统 Redux 有什么区别？
A 免去手写 action 常量、内置 Immer 与 thunk、自动配 devtools；样板代码减少一半以上，且是官方唯一推荐写法。
Q state.value += 1 不是违反不可变吗？
A 表面违反，底层 Immer 拦截赋值并生成不可变副本，等效于 { ...state, value: state.value + 1 }，写起来更直观。
Q 什么时候选 RTK 而不是 Zustand？
A 团队已熟悉 Redux 生态、需要 devtools 时间旅行、统一中间件规范或大型多人协作时选 RTK；追求最少代码和轻量用 Zustand。
