Redux Cheat Sheet

Updated 2026-05-25

Next Topic: Remix Framework and React Router v7 Cheat Sheet

🧠Study flashcards on this topic99 cards · spaced repetition→

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). Redux Toolkit (RTK) is the official, opinionated way to write Redux — eliminating boilerplate with createSlice, configureStore, createAsyncThunk, and RTK Query for data fetching. Redux 5.0 and RTK 2.0 (released late 2023) modernized the entire ecosystem with improved ESM packaging, TypeScript-first APIs, and new utilities like combineSlices and createDynamicMiddleware.

What This Cheat Sheet Covers

This topic spans 16 focused tables and 118 indexed concepts, 99 flashcards. 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 PatternsTable 16: TypeScript Integration

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Core Concepts

Redux's fundamental building blocks are store, action, reducer, dispatch, selector, middleware, and enhancer. Every Redux application — whether using plain Redux or RTK — is built on these seven concepts, so internalizing them is the foundation for everything else.

Concept	Example	Description
Store	`const store = configureStore({ reducer: rootReducer })`	• Holds the entire state tree of the application • provides `getState()`, `dispatch()`, and `subscribe()` methods
Action	`{ type: 'todos/add', payload: { id: 1, text: 'Learn Redux' } }`	• Plain JavaScript object with a required type field (string) describing what happened • optionally includes payload with 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 an action, returns new state • must be side-effect free and deterministic
Dispatch	`store.dispatch({ type: 'INCREMENT' })`	• Method to send actions to the store • triggers reducers to compute new state, then notifies subscribers
Selector	`const selectTodos = state => state.todos`	• Function that extracts specific data from Redux state • enables components to subscribe only to relevant slices, improving performance
Middleware	`configureStore({ reducer, middleware: (gDM) => gDM().concat(logger) })`	• Extension point between dispatching an action and reaching the reducer • enables logging, async logic, crash reporting, and other side effects
Enhancer	`configureStore({ reducer, enhancers: (gDE) => gDE().concat(myEnhancer) })`	• Higher-order function that wraps the store to add extra capabilities like middleware or DevTools • middleware is a specific type of enhancer

Table 2: Redux Toolkit (RTK) — Modern Redux

RTK 2.0 is the standard way to write Redux. It ships with RTK 2.0 and Redux 5.0, Reselect 5.0, React-Redux 9.0, and Redux Thunk 3.0 as a coordinated ecosystem update. Every new Redux project should use RTK — the raw createStore API is officially deprecated.

Function	Example	Description
configureStore	`const store = configureStore({` `reducer: { counter: counterSlice },` `middleware: (gDM) => gDM().concat(logger)` `})`	Replaces `createStore` with automatic DevTools, default middleware (thunk, immutability/serializability checks), and `autoBatchEnhancer` included by default in RTK 2.0. Middleware and enhancers must be callbacks in RTK 2.0.

The rest of this section is part of the full cheat sheet

Table 3: Actions and Action Creators

Actions are the only way to trigger state changes in Redux. Understanding the various action patterns — from plain constants to FSA conventions to thunk creators — determines how predictable and debuggable your action flow will be.

Pattern	Example	Description
Action Creator	`const addTodo = text => ({` `type: 'todos/add',` `payload: { id: Date.now(), text }` `})`	• Function that returns an action object • encapsulates action creation logic, enables reuse, and simplifies testing

The rest of this section is part of the full cheat sheet

Table 4: Reducers and State Updates

Reducers are the core of Redux logic. The key distinction is between vanilla Redux (manual immutable updates with spread operators) and RTK with Immer (write "mutative" code that stays immutable). Understanding both is essential for reading legacy code and writing modern RTK slices.

Technique	Example	Description
Immer "Mutative" Updates	`state.todos.push(newTodo)` `state.count += 1`	• RTK uses Immer internally • allows writing "mutative" code that produces immutable updates via copy-on-write — simpler and less error-prone than spread patterns

The rest of this section is part of the full cheat sheet

Table 1: Core Concepts

Concept	Example	Description
Store	`const store = configureStore({ reducer: rootReducer })`	• Holds the entire state tree of the application • provides `getState()`, `dispatch()`, and `subscribe()` methods
Action	`{ type: 'todos/add', payload: { id: 1, text: 'Learn Redux' } }`	• Plain JavaScript object with a required type field (string) describing what happened • optionally includes payload with 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 an action, returns new state • must be side-effect free and deterministic
Dispatch	`store.dispatch({ type: 'INCREMENT' })`	• Method to send actions to the store • triggers reducers to compute new state, then notifies subscribers
Selector	`const selectTodos = state => state.todos`	• Function that extracts specific data from Redux state • enables components to subscribe only to relevant slices, improving performance
Middleware	`configureStore({ reducer, middleware: (gDM) => gDM().concat(logger) })`	• Extension point between dispatching an action and reaching the reducer • enables logging, async logic, crash reporting, and other side effects
Enhancer	`configureStore({ reducer, enhancers: (gDE) => gDE().concat(myEnhancer) })`	• Higher-order function that wraps the store to add extra capabilities like middleware or DevTools • middleware is a specific type of enhancer

Table 2: Redux Toolkit (RTK) — Modern Redux

Function	Example	Description
configureStore	`const store = configureStore({` `reducer: { counter: counterSlice },` `middleware: (gDM) => gDM().concat(logger)` `})`	Replaces `createStore` with automatic DevTools, default middleware (thunk, immutability/serializability checks), and `autoBatchEnhancer` included by default in RTK 2.0. Middleware and enhancers must be callbacks in RTK 2.0.

Table 3: Actions and Action Creators

Pattern	Example	Description
Action Creator	`const addTodo = text => ({` `type: 'todos/add',` `payload: { id: Date.now(), text }` `})`	• Function that returns an action object • encapsulates action creation logic, enables reuse, and simplifies testing

Table 4: Reducers and State Updates

Technique	Example	Description
Immer "Mutative" Updates	`state.todos.push(newTodo)` `state.count += 1`	• RTK uses Immer internally • allows writing "mutative" code that produces immutable updates via copy-on-write — simpler and less error-prone than spread patterns