Redux Cheat Sheet

Updated 2026-03-10

Next Topic: Remix Framework and React Router v7 Cheat Sheet

Redux is a predictable state container for JavaScript applications, most commonly used with React but framework-agnostic. It centralizes application state into a single immutable store, enforces unidirectional data flow, and enables powerful debugging capabilities like time-travel and hot reloading. Redux follows three core principles: single source of truth, state is read-only, and changes are made with pure functions (reducers). While modern alternatives exist (Zustand, Recoil, Jotai), Redux remains widely adopted in large-scale applications where predictability, middleware extensibility, and DevTools integration are critical. Redux Toolkit (RTK) is now the official, opinionated way to write Redux — simplifying boilerplate with utilities like createSlice, configureStore, and createAsyncThunk, while including Immer for safe "mutative" updates and RTK Query for data fetching.

What This Cheat Sheet Covers

This topic spans 15 focused tables and 88 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core ConceptsTable 2: Redux Toolkit (RTK) — Modern ReduxTable 3: Actions and Action CreatorsTable 4: Reducers and State UpdatesTable 5: Async Logic and Side EffectsTable 6: Store Configuration and MiddlewareTable 7: Selectors and MemoizationTable 8: React-Redux IntegrationTable 9: RTK Query — Data FetchingTable 10: DevTools and DebuggingTable 11: Testing StrategiesTable 12: Performance OptimizationTable 13: State Persistence and HydrationTable 14: Middleware PatternsTable 15: Advanced Patterns

Table 1: Core Concepts

Concept	Example	Description
Store	`const store = createStore(rootReducer)`	• Holds the entire state tree of the application • provides `getState()`, `dispatch()`, and `subscribe()` methods to access and update state.
Action	`{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } }`	• Plain JavaScript object with a type field (string constant) describing what happened • optionally includes a payload with additional data.
Reducer	`(state = initialState, action) => {` `switch (action.type) {` `case 'INCREMENT': return { count: state.count + 1 }` `default: return state` `}` `}`	• Pure function that takes current state and action, returns new state • must be side-effect free and handle unknown actions by returning existing state.
Dispatch	`store.dispatch({ type: 'INCREMENT' })`	• Method to send actions to the store • triggers reducers to calculate new state, then notifies subscribers of state changes.

Table 1: Core Concepts

Concept	Example	Description
Store	`const store = createStore(rootReducer)`	• Holds the entire state tree of the application • provides `getState()`, `dispatch()`, and `subscribe()` methods to access and update state.
Action	`{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } }`	• Plain JavaScript object with a type field (string constant) describing what happened • optionally includes a payload with additional data.
Reducer	`(state = initialState, action) => {` `switch (action.type) {` `case 'INCREMENT': return { count: state.count + 1 }` `default: return state` `}` `}`	• Pure function that takes current state and action, returns new state • must be side-effect free and handle unknown actions by returning existing state.
Dispatch	`store.dispatch({ type: 'INCREMENT' })`	• Method to send actions to the store • triggers reducers to calculate new state, then notifies subscribers of state changes.