Redux Cheatsheet - State Management
Redux Toolkit 状态管理必备 API 都在这里了，从 Store 配置到异步处理，按类别分类整理，写代码时直接复制。
Back to LanguagesStore 配置 5
const store = configureStore({ reducer: rootReducer })RTK 创建 store
configureStore({ reducer: { users: usersReducer, posts: postsReducer } })多 reducer 自动合并
configureStore({ middleware: (gdm) => gdm().concat(logger) })追加自定义中间件
configureStore({ devTools: "prerender" !== "production" })仅开发环境开启 devTools
const rootReducer = combineReducers({ users, posts })手动合并多个 reducer
Slice 创建 6
const slice = createSlice({ name, initialState, reducers })创建 slice
name: "counter"slice 命名空间（自动作为 action 前缀）
initialState: { count: 0 }slice 初始状态
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 函数
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 数据获取
💡 Tips
- Redux 三大原则：单一数据源、状态只读、纯函数修改状态。
- RTK 内置 Immer，可在 reducer 中直接"修改"状态，底层自动生成不可变更新。
- useSelector 会在 store 更新时重新执行，返回新引用会触发重渲染，注意性能优化。
- Redux Toolkit (RTK) 是官方推荐的方式，configureStore 和 createSlice 大幅简化样板代码。
- createAsyncThunk 配合 extraReducers 处理异步，redux-thunk 已内置在 RTK 默认中间件中。