Redux Toolkit Cheat Sheet

Covers Redux Toolkit's configureStore, createSlice reducers, createAsyncThunk for async logic, React-Redux hooks, and RTK Query data fetching.

2 PagesIntermediateMar 20, 2026

configureStore

The recommended way to set up a Redux store.

javascript

// store.jsimport { configureStore } from '@reduxjs/toolkit';import counterReducer from './counterSlice';export const store = configureStore({  reducer: {    counter: counterReducer,  },  // devtools + thunk middleware + dev-mode checks included by default});

createSlice

Actions and a reducer generated from one object.

javascript

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

createAsyncThunk

Dispatches pending/fulfilled/rejected automatically.

javascript

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';export const fetchUser = createAsyncThunk(  'user/fetchById',  async (userId) => {    const res = await fetch(`/api/users/${userId}`);    return res.json();  });const userSlice = createSlice({  name: 'user',  initialState: { data: null, status: 'idle' },  reducers: {},  extraReducers: (builder) => {    builder      .addCase(fetchUser.pending, (state) => { state.status = 'loading'; })      .addCase(fetchUser.fulfilled, (state, action) => {        state.status = 'succeeded';        state.data = action.payload;      })      .addCase(fetchUser.rejected, (state) => { state.status = 'failed'; });  },});

React-Redux Hooks & RTK Query

Read/dispatch state, then auto-generate data-fetching hooks.

javascript

// Reading/dispatching stateimport { useSelector, useDispatch } from 'react-redux';import { increment } from './counterSlice';function Counter() {  const count = useSelector((state) => state.counter.value);  const dispatch = useDispatch();  return <button onClick={() => dispatch(increment())}>{count}</button>;}// RTK Query: auto-generated hooks for data fetching + cachingimport { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';export const api = createApi({  reducerPath: 'api',  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),  endpoints: (builder) => ({    getUsers: builder.query({ query: () => 'users' }),  }),});export const { useGetUsersQuery } = api;// const { data, isLoading } = useGetUsersQuery();

Key Concepts

Terms you'll see throughout the RTK docs.

createSlice- Generates action creators and a reducer from one object, using Immer internally
configureStore- Sets up the store with sane defaults: thunk middleware, DevTools, dev-mode checks
Immer- Library RTK uses so reducers can write mutating-looking code that produces immutable updates
RTK Query- Built-in data-fetching/caching layer that generates hooks like useGetUsersQuery
extraReducers- Where a slice responds to actions defined outside itself, e.g. thunk lifecycle actions

Pro Tip

Never both mutate the draft state AND return a new value from a createSlice reducer — Immer only allows one or the other, and mixing them throws "An immer producer returned a new value and modified its draft" at runtime.

Was this cheat sheet helpful?

Angular RxJS Cheat Sheet

TypeScript with React Cheat Sheet

Explore Topics

#ReduxToolkit#ReduxToolkitCheatSheet#WebDevelopment#Intermediate#ConfigureStore#CreateSlice#CreateAsyncThunk#React#Databases#Concurrency#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services