Redux Cheatsheet - State Management
This reference is for React developers who want predictable, central state with the Redux Toolkit. It covers store configuration, createSlice with its auto-generated actions and Immer-powered immutability, async logic via createAsyncThunk with pending/fulfilled/rejected cases, middleware, and the React bindings useSelector/useDispatch. A closing section shows normalized state with createEntityAdapter and a first look at RTK Query. After reading you should be able to set up a slice, dispatch both sync and async actions, read state reactively, and model collections as normalized entities.
Store Setup 5
const store = configureStore({ reducer: rootReducer })Create a store with RTK
configureStore({ reducer: { users: usersReducer, posts: postsReducer } })Auto-merge multiple reducers
configureStore({ middleware: (gdm) => gdm().concat(logger) })Append custom middleware
configureStore({ devTools: process.env.NODE_ENV !== "production" })Enable devTools in dev only
const rootReducer = combineReducers({ users, posts })Manually combine multiple reducers
Slice Creation 6
const slice = createSlice({ name, initialState, reducers })Create a slice
name: "counter"Slice namespace (auto action prefix)
initialState: { count: 0 }Slice initial state
reducers: { increment(state) { state.count += 1 } }Synchronous reducer (Immer keeps it immutable)
extraReducers: (builder) => builder.addCase(fulfilled, ...)Handle external async actions
export const { increment } = slice.actionsExport auto-generated action creators
Actions & Dispatch 5
dispatch(increment())Dispatch a sync action
dispatch(fetchUser(id))Dispatch an async thunk
const { increment } = counterSlice.actionsGet the action creator from the slice
store.dispatch({ type: "counter/increment" })Dispatch a raw action object directly
export default slice.reducerExport the reducer for the store
Async Handling 5
const fetchUser = createAsyncThunk("user/fetch", async (id) => {})Create an async thunk
builder.addCase(fetchUser.pending, (state) => {})Handle the pending state
builder.addCase(fetchUser.fulfilled, (state, action) => {})Handle the fulfilled state
builder.addCase(fetchUser.rejected, (state, action) => {})Handle the rejected state
await dispatch(fetchUser(id)).unwrap()Get the result or throw on error
Middleware 5
const logger = () => (next) => (action) => {}Custom middleware signature (triple curry)
middleware: (gdm) => gdm().concat(customMiddleware)Keep defaults and append custom middleware
configureStore({ middleware: (gdm) => gdm({ serializableCheck: false }) })Configure default middleware options
import { thunk } from "redux-thunk"redux-thunk async middleware (bundled in RTK)
gdm({ immutableCheck: false, serializableCheck: false })Disable checks in production for performance
Selectors 5
useSelector((state) => state.counter.value)Read state from the store
const dispatch = useDispatch()Get the dispatch function
const selectCount = (state) => state.counter.valueDefine a selector function
const selectUserById = createSelector(...)Create a memoized selector (reselect)
useSelector(selectUserById, shallowEqual)Shallow compare to avoid needless re-renders
Common Patterns 6
<Provider store={store}><App /></Provider>Inject the store at the root
state.entities[id]Normalized state (store entities by id)
createEntityAdapter({ selectId: (item) => item.id })Entity adapter manages collections
adapter.getSelectors((state) => state.items)Get entity adapter selectors
adapter.upsertOne(state, item)Upsert one (update if exists, insert if not)
import { createApi } from "@reduxjs/toolkit/query/react"RTK Query data fetching
Tips
- Redux three principles: single source of truth, state is read-only, changes via pure functions.
- RTK bundles Immer, so you can 'mutate' state directly in reducers; it generates immutable updates.
- useSelector re-runs on store updates; returning a new reference triggers a re-render, so watch performance.
- Redux Toolkit (RTK) is the official recommended way; configureStore and createSlice cut boilerplate.
- createAsyncThunk with extraReducers handles async; redux-thunk is bundled in RTK's default middleware.
Official References
Each command links to its official documentation below, so you can verify the latest usage and read deeper.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Contact Us
Wrong command or description? Send us corrections, business inquiries or product feedback by email.
Contact Us