Redux Cheatsheet - State Management
All essential Redux commands organized by use case, with 37+ entries you can copy and run directly. Find the right command fast when you need it.
Back to LanguagesStore 5
const store = configureStore({ reducer: rootReducer })RTK Create store
configureStore({ reducer: { users: usersReducer, posts: postsReducer } })多 reducer 自动merge
configureStore({ middleware: (gdm) => gdm().concat(logger) })Append自定义middleware
configureStore({ devTools: "prerender" !== "production" })仅开发环境开启 devTools
const rootReducer = combineReducers({ users, posts })手动merge多个 reducer
Slice 6
const slice = createSlice({ name, initialState, reducers })Create slice
name: "counter"slice 命名空间（自动作为 action 前缀）
initialState: { count: 0 }slice 初始state
reducers: { increment(state) { state.count += 1 } }Sync reducer（Immer 自动不可变）
extraReducers: (builder) => builder.addCase(fulfilled, ...)处理外部async action
export const { increment } = slice.actionsExport自动生成的 action creators
Actions Dispatch 5
dispatch(increment())dispatch Sync action
dispatch(fetchUser(id))dispatch async thunk
const { increment } = counterSlice.actions从 slice Get action creator
store.dispatch({ type: "counter/increment" })直接 dispatch 原始 action object
export default slice.reducerExport reducer 给 store
Async 5
const fetchUser = createAsyncThunk("user/fetch", async (id) => {})Createasync thunk
builder.addCase(fetchUser.pending, (state) => {})处理request中state
builder.addCase(fetchUser.fulfilled, (state, action) => {})处理request成功
builder.addCase(fetchUser.rejected, (state, action) => {})处理request失败
await dispatch(fetchUser(id)).unwrap()Get成功结果或throw错误
Middleware 5
const logger = () => (next) => (action) => {}自定义middleware签名（三层柯里化）
middleware: (gdm) => gdm().concat(customMiddleware)保留默认middleware并Append
configureStore({ middleware: (gdm) => gdm({ serializableCheck: false }) })Configure默认middleware选项
import { thunk } from "redux-thunk"redux-thunk asyncmiddleware（RTK 默认内置）
gdm({ immutableCheck: false, serializableCheck: false })生产环境CloseCheck以提升性能
Selectors 5
useSelector((state) => state.counter.value)从 store Readstate
const dispatch = useDispatch()Get dispatch function
const selectCount = (state) => state.counter.value定义选择器function
const selectUserById = createSelector(...)Create memoized 选择器（reselect）
useSelector(selectUserById, shallowEqual)浅compare避免不必要的重render
Common Patterns 6
<Provider store={store}><App /></Provider>在根component注入 store
state.entities[id]规范化state（按 id 存储实体）
createEntityAdapter({ selectId: (item) => item.id })实体适配器管理set
adapter.getSelectors((state) => state.items)Get实体适配器选择器
adapter.upsertOne(state, item)exists则Update，不exists则Insert
import { createApi } from "@reduxjs/toolkit/query/react"RTK Query 数据Get
💡 Tips
- Redux 三大原则：单一数据源、state只读、纯function修改state。
- RTK 内置 Immer，可在 reducer 中直接"修改"state，底层自动生成不可变Update。
- useSelector 会在 store Update时重新Execute，返回新引用会触发重render，note性能optimize。
- Redux Toolkit (RTK) 是官方recommended的方式，configureStore 和 createSlice 大幅简化样板代码。
- createAsyncThunk 配合 extraReducers 处理async，redux-thunk 已内置在 RTK 默认middleware中。
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it