Redux Cheat Sheet

How to use this Redux cheat sheet

createSlice generates action creators and Immer-powered reducers from a name, initialState, and reducers object. configureStore sets up the store with Redux DevTools and default middleware including thunk support via createAsyncThunk.

useSelector reads state with memoized selectors; useDispatch sends actions. RTK Query adds data-fetching slices with caching, invalidation tags, and generated hooks—replacing much manual thunk boilerplate.

Quick Redux example

import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchTodos = createAsyncThunk('todos/fetch', async () => {
  const res = await fetch('/api/todos');
  return res.json();
});

const todosSlice = createSlice({
  name: 'todos',
  initialState: { items: [], status: 'idle' },
  reducers: {
    added(state, action) { state.items.push(action.payload); },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = 'idle';
        state.items = action.payload;
      });
  },
});

export const store = configureStore({ reducer: { todos: todosSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;

createSlice & configureStore

React Hooks

createAsyncThunk

RTK Query & Selectors

RTK Query API slice stub

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Todo'],
  endpoints: (builder) => ({
    getTodos: builder.query<Todo[], void>({
      query: () => 'todos',
      providesTags: ['Todo'],
    }),
    addTodo: builder.mutation<Todo, Partial<Todo>>({
      query: (body) => ({ url: 'todos', method: 'POST', body }),
      invalidatesTags: ['Todo'],
    }),
  }),
});
export const { useGetTodosQuery, useAddTodoMutation } = api;

Add api.reducer and api.middleware to configureStore; wrap app with RTK Query hooks.

Memoized selector

const selectTodos = (state: RootState) => state.todos.items;
export const selectActiveTodos = createSelector(
  [selectTodos],
  (todos) => todos.filter((t) => !t.completed)
);

createSelector recomputes only when input selectors return new references.

Typed React-Redux hooks

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Export typed hooks once from store.ts and use everywhere instead of raw hooks.

Common mistakes

• Storing derived or denormalized data in Redux instead of computing with selectors.
• Mutating state outside Immer reducers (spreading nested objects manually everywhere).
• Putting non-serializable values (Dates, class instances, promises) in the store.
• Fetching in useEffect when RTK Query would handle cache, loading, and errors.

Key takeaways

• createSlice is the default for reducers; avoid hand-written switch statements.
• createAsyncThunk standardizes async pending/fulfilled/rejected handling.
• RTK Query replaces most manual fetch-thunk-cache logic for server state.
• Memoized selectors prevent unnecessary re-renders in connected components.