Redux Toolkit — official tutorial path

0. How the Redux team wants you to learn

The RTK Tutorials Overview page says the deep tutorials live on redux.js.org, and RTK docs point there instead of duplicating everything.

Quick Start — fastest way to add RTK + React-Redux and use the main APIs. Start here if you just need it running.

TypeScript Quick Start — same wiring with RootState / AppDispatch patterns.

Next.js tutorial — how Provider fits an App Router app (client boundary).

Redux Essentials — “how do I use this to build something useful?” Real-world style app. Best if you are new to Redux.

Redux Fundamentals — bottom-up: write Redux by hand, then see why RTK wraps it. Best when you want the “why”.

Usage Guide + API Reference — look up each API when you need details. Usage with TypeScript for TS patterns. RTK Query Quick Start when you need Redux-powered fetching.

Need it working tonight  → Quick Start (this lesson §1–§4)
New to Redux             → Essentials on redux.js.org
Want the “why”           → Fundamentals on redux.js.org
Using Next + TS (here)   → §5 below + our AppProviders
Need server cache in RTK → RTK Query Quick Start (later topic)
Migrating old Redux      → “Modern Redux with RTK” in Fundamentals

1. Quick Start — install

Quick Start step one: add @reduxjs/toolkit and react-redux.

This monorepo already has both in apps/web.

pnpm add @reduxjs/toolkit react-redux

pnpm add @reduxjs/toolkit
// components still cannot use useSelector / useDispatch

2. Quick Start — create the store

Create a store with configureStore. Even an empty reducer object is valid to start; DevTools are enabled by default.

Infer RootState and AppDispatch from the store — that is the TypeScript Quick Start pattern.

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. Quick Start — create a slice, then register it

createSlice needs: name, initialState, reducers. It generates action creators and the slice reducer.

You may write “mutating” updates inside reducers — Immer turns them into immutable updates (see also “Writing Reducers with Immer” in the RTK docs).

Put the slice reducer on the store under a key (counter, notesDraft, …).

import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

type CounterState = { value: number };
const initialState: CounterState = { value: 0 };

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state) {
      state.value += 1;
    },
    decrement(state) {
      state.value -= 1;
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

// store.ts
import counterReducer from "./features/counter/counterSlice";
export const store = configureStore({
  reducer: { counter: counterReducer },
});

// Slice exists, but store still has reducer: {}
// useSelector(s => s.counter) is undefined

4. Quick Start — Provider + useSelector / useDispatch

Wrap the app in <Provider store={store}>.

Read with useSelector; write with dispatch(increment()). When the store updates, subscribed components re-render.

That is the whole daily loop from the Quick Start “What You’ve Learned” summary.

import { useSelector, useDispatch } from "react-redux";
import type { RootState, AppDispatch } from "./store";
import { increment, decrement } from "./counterSlice";

export function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch<AppDispatch>();
  return (
    <div>
      <button type="button" onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button type="button" onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

import { useDispatch, useSelector, type TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// then: useAppSelector(s => s.counter.value)

5. Next.js + this monorepo

Tutorials Overview links a Next.js-specific RTK setup. In the App Router, Provider must live in a Client Component.

Here: apps/web/src/components/providers/app-providers.tsx currently wraps QueryClientProvider. Add a Redux Provider the same way when a feature needs a client draft store (Week 4 Notes projects).

Do not put the store in a Server Component. Do not create a new store on every render without care — use useState(() => makeStore()).

"use client";
import { Provider as ReduxProvider } from "react-redux";
import { makeStore } from "@/features/notes/notesDraftStore";

export function AppProviders({ children }) {
  const [store] = useState(() => makeStore());
  return <ReduxProvider store={store}>{children}</ReduxProvider>;
}

6. After Quick Start — Essentials, Fundamentals, Usage Guide

Essentials (redux.js.org): build a realistic feature flow with RTK as the default. The next topic (client drafts) plus Week 4 Notes projects are the course’s Essentials-style practice.

Fundamentals (redux.js.org): hand-written actions/reducers first, then see how createSlice / configureStore replace the boilerplate. Read this when “why Immer / why one store?” still feels fuzzy.

Usage Guide: per-API patterns. API Reference: exact signatures. Writing Reducers with Immer: deep dive on draft state.

RTK Query Quick Start: when you need fetching inside Redux — covered in the RTK Query vs TanStack topic (this repo prefers TanStack for Nest).

Official Quick Start     → this topic §§1–4
Official Essentials      → rtk-client-drafts + Week 4 Notes projects
Official Fundamentals    → optional homework on redux.js.org
Official RTK Query QS    → rtk-vs-query topic
Official Usage Guide     → when you need createAsyncThunk / entityAdapter details

7. Toolbox reminder (from Getting Started)

Daily: createSlice, configureStore, Provider, useSelector, useDispatch.

Also in the box: createAsyncThunk, createEntityAdapter, createSelector, combineSlices, createAction/createReducer, RTK Query createApi.

You do not need every tool on day one — Quick Start is enough to be productive.

// Local button open/closed → useState
// Nest list data → TanStack Query
// Shared wizard draft → RTK createSlice

Keep in mind

• Tutorials Overview: https://redux-toolkit.js.org/tutorials/overview
• Quick Start: https://redux-toolkit.js.org/tutorials/quick-start
• Then Essentials / Fundamentals on https://redux.js.org
• Apply Provider + slice in Week 4 Notes UI projects.