Redux 状态管理速查表 - Redux Toolkit 与 React 状态管理大全
这张速查给想在 React 里做可预测、集中式状态管理的开发者，用的是 Redux Toolkit 这套现代化写法。内容涵盖 store 配置、createSlice（自动生成 action、靠 Immer 保证不可变）、createAsyncThunk 及其 pending/fulfilled/rejected 三态处理、中间件，以及 React 侧的 useSelector/useDispatch 绑定。收尾章节用 createEntityAdapter 展示规范化实体管理，并顺带看一眼 RTK Query。读完你应能搭好一个 slice、同时派发同步与异步 action、响应式读取状态，并把集合建模成按 id 存储的规范化实体。
Store 配置 5
const store = configureStore({ reducer: rootReducer })RTK 创建 store，自动带上 thunk 与 devTools 等默认配置
configureStore({ reducer: { users: usersReducer, posts: postsReducer } })多 reducer 自动合并
configureStore({ middleware: (gdm) => gdm().concat(logger) })追加自定义中间件
configureStore({ devTools: process.env.NODE_ENV !== "production" })仅开发环境开启 devTools
const rootReducer = combineReducers({ users, posts })手动合并多个 reducer
Slice 创建 6
const slice = createSlice({ name, initialState, reducers })一次定义 name/initialState/reducers，自动生成同名 action 与 reducer
name: "counter"slice 命名空间，自动作为生成的 action 前缀（如 counter/increment）
initialState: { count: 0 }定义这个 slice 的初始值，reducer 首次运行从这里开始
reducers: { increment(state) { state.count += 1 } }同步 reducer（Immer 自动不可变）
extraReducers: (builder) => builder.addCase(fulfilled, ...)处理外部异步 action
export const { increment } = slice.actions导出自动生成的 action creators
Actions 与 Dispatch 5
dispatch(increment())dispatch 同步 action
dispatch(fetchUser(id))dispatch 异步 thunk
const { increment } = counterSlice.actions从 slice 获取 action creator
store.dispatch({ type: "counter/increment" })直接 dispatch 原始 action 对象
export default slice.reducer导出 reducer 给 store
异步处理 5
const fetchUser = createAsyncThunk("user/fetch", async (id) => {})创建异步 thunk
builder.addCase(fetchUser.pending, (state) => {})处理请求中状态
builder.addCase(fetchUser.fulfilled, (state, action) => {})处理请求成功
builder.addCase(fetchUser.rejected, (state, action) => {})处理请求失败
await dispatch(fetchUser(id)).unwrap()获取成功结果或抛出错误
中间件 5
const logger = () => (next) => (action) => {}自定义中间件签名（三层柯里化）
middleware: (gdm) => gdm().concat(customMiddleware)保留默认中间件并追加
configureStore({ middleware: (gdm) => gdm({ serializableCheck: false }) })配置默认中间件选项
import { thunk } from "redux-thunk"redux-thunk 异步中间件（RTK 默认内置）
gdm({ immutableCheck: false, serializableCheck: false })生产环境关闭检查以提升性能
选择器 5
useSelector((state) => state.counter.value)订阅式读取状态，store 中对应值变化时组件自动重渲染
const dispatch = useDispatch()在组件里拿到 dispatch，用它触发 action
const selectCount = (state) => state.counter.value定义选择器函数
const selectUserById = createSelector(...)创建 memoized 选择器（reselect）
useSelector(selectUserById, shallowEqual)浅比较避免不必要的重渲染
常用模式 6
<Provider store={store}><App /></Provider>在根组件注入 store
state.entities[id]规范化状态（按 id 存储实体）
createEntityAdapter({ selectId: (item) => item.id })实体适配器管理集合
adapter.getSelectors((state) => state.items)获取实体适配器选择器
adapter.upsertOne(state, item)存在则更新，不存在则插入
import { createApi } from "@reduxjs/toolkit/query/react"RTK Query 数据获取
提示
- Redux 三大原则：单一数据源、状态只读、纯函数修改状态。
- RTK 内置 Immer，可在 reducer 中直接"修改"状态，底层自动生成不可变更新。
- useSelector 会在 store 更新时重新执行，返回新引用会触发重渲染，注意性能优化。
- Redux Toolkit (RTK) 是官方推荐的方式，configureStore 和 createSlice 大幅简化样板代码。
- createAsyncThunk 配合 extraReducers 处理异步，redux-thunk 已内置在 RTK 默认中间件中。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。