Redux Cheat Sheet

A reference for Redux Toolkit's store setup, slices, reducers, and React bindings for predictable, centralized state management.

2 PagesIntermediateMar 8, 2026

Store Setup

Configuring the store and providing it to a React app.

javascript

import { configureStore } from '@reduxjs/toolkit';import counterReducer from './counterSlice';export const store = configureStore({  reducer: {    counter: counterReducer,  },});// wrap the appimport { Provider } from 'react-redux';<Provider store={store}>  <App /></Provider>

createSlice

Defining reducers and action creators together with Redux Toolkit.

javascript

import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({  name: 'counter',  initialState: { value: 0 },  reducers: {    increment: (state) => {      state.value += 1; // Immer lets you write "mutating" logic safely    },    decrement: (state) => {      state.value -= 1;    },    incrementBy: (state, action) => {      state.value += action.payload;    },  },});export const { increment, decrement, incrementBy } = counterSlice.actions;export default counterSlice.reducer;

Using Redux in React

Reading state and dispatching actions with react-redux hooks.

javascript

import { useSelector, useDispatch } from 'react-redux';import { increment, decrement } from './counterSlice';function Counter() {  const count = useSelector((state) => state.counter.value);  const dispatch = useDispatch();  return (    <button onClick={() => dispatch(increment())}>      Count: {count}    </button>  );}

Core Concepts

Terminology used throughout the Redux ecosystem.

Store- the single source of truth holding the entire application state tree
Action- a plain object with a 'type' field describing what happened
Reducer- a pure function of the form (state, action) => newState
configureStore- RTK helper that sets up the store with good defaults (thunk middleware, DevTools)
createSlice- generates action creators and a reducer from a set of reducer functions
createAsyncThunk- RTK helper for handling async request lifecycles (pending/fulfilled/rejected)
Selector- a function that extracts and derives a piece of state from the store
Middleware- intercepts dispatched actions before they reach the reducer, e.g. redux-thunk

Pro Tip

createSlice uses Immer internally, so reducers can 'mutate' state directly (state.value += 1) and Immer produces the correct immutable update behind the scenes -- but never mutate state outside of a slice reducer, since that safety net only applies there.

Was this cheat sheet helpful?

jQuery Cheat Sheet

Zustand Cheat Sheet