Course
Redux
187 lessons across 18 modules
Intermediate to advanced, assuming JavaScript and React. From the state-management question through the store, Redux Toolkit, selectors, async thunks, middleware, RTK Query, auth, architecture, performance and testing - ending in two full projects. The road is laid out in full; lessons are being written one at a time.
State Management Fundamentals
The question Redux answers, before any Redux
State management in the React course →What is State Management?
1What "state" is, why two parts of an app start to disagree about the same data, and the three questions every state management tool - including Redux - answers.
Local State vs Global State
2Most state belongs to one component. Learn to sort state into local and global with four simple questions, and see - with measured re-renders - what each wrong choice costs.
Client State vs Server State
3Some data belongs to your app. Other data belongs to a server, and your app only holds a copy that can go out of date. Learn to tell them apart, and see - with real requests counted - why server data needs different tools.
Why State Management Becomes Difficult
4Six ways state goes wrong as an app grows - duplicated values, drifting copies, stored totals, changes nobody can trace, changes React never sees, and answers that arrive in the wrong order. Each one reproduced with running code, and each one fixed.
Prop Drilling
5Passing a value down through components that do not use it. When it is perfectly fine, what it really costs (measured - it is mostly not speed), and three ways out: composition, Context and a store.
Lifting State Up
6When two components need the same state, move it up to their closest common parent - value down, changes up. Then see, with counted re-renders, what happens when state climbs too high, and three ways back.
Context API vs Redux
7React Context delivers a value to components; it does not manage state. See - with counted re-renders - why one big context re-renders every consumer, how to fix it, and when Context or Redux is the right choice.
When Should You Use Redux?
8Redux has real costs and real benefits - we measured both. The honest criteria for using it, the kinds of apps that do not need it, and how to delete a store that only one screen ever read.
Redux Architecture Overview
9The whole Redux loop on one page - UI, action, dispatch, middleware, reducers, store, selectors - traced step by step through a real click and a real server request. Then how to draw a feature on paper before writing code.
Redux Terminology
10Every Redux word you will meet in this course - store, action, reducer, dispatch, selector, middleware and more - defined once in simple English, shown working in one runnable script, with the pairs people mix up.
Redux Fundamentals
The model, before the tooling that hides it
What is Redux?
11A predictable state container - and what each of those words buys.
Replaying a bug from a recorded action list
Redux Core Principles
12Single source of truth, read-only state, pure reducers.
Breaking each principle and watching what goes wrong
Store
13Created once, held at the top, read everywhere.
Creating a store and logging its state
State
14The shape of the tree, and why it is never mutated in place.
Two slices side by side in one state object
Actions
15Plain objects describing what happened, not what to change.
Naming after events rather than setters
Reducers
16Pure functions from state and action to the next state.
A reducer that must not touch the state it was handed
Dispatch
17The only way in, and what happens on the way through.
Following one dispatch from click to re-render
Selectors
18The only way out, and why reading through a function matters.
Changing the state shape without touching a component
Redux Data Flow
19The whole cycle end to end, with nothing skipped.
A counter traced through all five steps
Unidirectional Data Flow
20Why one direction makes a system you can reason about.
A two-way binding bug that cannot happen here
Redux Without Redux Toolkit
The long way round, so Toolkit makes sense
Creating a Redux Store
21createStore by hand, and everything you must supply yourself.
Ten lines before a single feature exists
Creating Actions
22Type constants and action creators, written out in full.
Three files for one increment
Creating Reducers
23Switch statements, default cases, and returning new objects.
A spread that has to go three levels deep
Dispatching Actions
24Wiring dispatch without the React bindings.
store.dispatch from a plain DOM handler
Reading State
25getState, subscribe, and doing the re-render yourself.
A manual subscription that has to be cleaned up
Combining Reducers
26combineReducers, and how the state tree gets its shape.
Two reducers becoming two keys
Middleware
27applyMiddleware, and why async needs it at all.
Adding thunk support by hand
Redux DevTools
28Wiring the extension manually, and what it shows you.
Time-travelling through a bug
Building a Counter
29The smallest complete app, with every piece visible.
Increment and decrement, nothing hidden
Building a Todo Store
30Add, toggle, and remove - and the immutability that costs.
Updating one item in an array without mutating it
Redux Toolkit
The way Redux is actually written now
Why Redux Toolkit?
31Module 3 line by line, and what disappears.
The same counter, two thirds shorter
configureStore
32Store setup, devtools, and the middleware you get for free.
Replacing createStore and four lines of wiring
createSlice
33Reducers and actions declared together, in one place.
A slice that generates its own action creators
Initial State
34Shaping it deliberately, and typing it once.
An initial state that makes the loading case obvious
Reducers
35Case reducers inside a slice, and what they may assume.
Three reducers that stay readable at a glance
Actions
36Generated creators, their types, and prepare callbacks.
Generating an id inside the action, not the reducer
useSelector
37A first look at reading from the store in a component.
Rendering the counter value
useDispatch
38A first look at sending an action from a component.
A button wired to increment
Immer and Immutable Updates
39Why state.value += 1 is safe here and nowhere else.
The draft, and what it produces when you are done
Multiple Slices
40Splitting by feature, and keeping slices independent.
Auth, courses, and cart with no shared keys
Store Configuration
41Middleware, devtools, preloaded state, and enhancers.
Turning off the serializability check, and when that is wrong
Redux Toolkit Project Structure
42Where slices, selectors, and the store actually live.
app/store.ts and a features folder
Redux with React
Wiring the store into components
Installing React Redux
43The bindings package, and what it is responsible for.
What react-redux adds that Redux itself does not
Provider
44Putting the store in context, once, at the top.
The error you get from a component outside it
useSelector
45Reading state, and the equality check that decides re-renders.
A selector returning a new object every render
useDispatch
46Sending actions, and keeping store details out of components.
A button that dispatches and knows nothing else
Connecting Components
47Which components should touch the store at all.
One container reading, five children taking props
Reading Multiple Values
48Several selectors against one object selector.
Why one call returning three fields re-renders constantly
Dispatching Payloads
49Passing data with an action, and where to shape it.
Sending a whole record rather than four arguments
Updating Objects
50Editing one field of a record inside a slice.
A profile update that keeps the other fields
Updating Arrays
51Add, remove, and edit in place - safely, via Immer.
Toggling one item in a list of two hundred
Sharing State Between Components
52Two distant components on one value, with no prop drilling.
A cart badge and the cart page agreeing
Building a React and Redux Application
53Every piece so far, assembled into something that runs.
A course list with full CRUD
Redux Actions and Payloads
Designing the messages your app sends itself
What is an Action?
54A description of something that happened, and nothing more.
userLoggedOut against setUser(null)
Action Creators
55Functions that build actions, and why you never write the object.
A typo in a string that the creator makes impossible
Payload
56The convention, and what belongs in it.
One payload field against four loose properties
Multiple Payload Values
57Passing several things without inventing positional arguments.
An object payload that reads at the call site
Structured Payloads
58Shaping a payload so the reducer stays simple.
Normalising in the prepare callback, not the reducer
Action Naming
59domain/eventHappened - past tense, and why it matters.
Renaming a slice worth of setters into events
Action Design Patterns
60One action many reducers, and when to split instead.
A logout that three slices each respond to
Updating Nested State
61Reaching into depth safely - and the sign you should flatten.
A four-level update that says normalise me
Handling Collections
62Add, update, remove, and reorder within a slice.
Four reducers covering a whole list
Practical CRUD Example
63The full set against one resource, end to end.
A users slice with all four operations
Selectors
Reading state without coupling to its shape
What is a Selector?
64A function from state to the piece you want.
Moving state.users.items out of six components
Basic Selectors
65Writing them, naming them, and where they live.
selectCurrentUser beside the slice that owns it
Reusable Selectors
66One definition, many call sites - and refactors that stay cheap.
Renaming a state key and changing one line
Derived State
67Computing rather than storing, and the bugs storing causes.
A total that drifts out of sync with its items
Filtering State
68Filters and sorts in a selector, not in a component body.
An active-users list computed once
Selecting Nested State
69Reaching in safely, with defaults for the missing case.
A selector that survives an empty store on first render
Selector Composition
70Building larger selectors out of smaller ones.
Three primitives combining into one screen selector
Memoized Selectors
71Why a new array every call causes a re-render, and the fix.
filter() in a selector, before and after memoising
Reselect
72createSelector, its cache of one, and what invalidates it.
A selector recomputing on every unrelated dispatch
Selector Performance
73Measuring rather than guessing, and the cost of getting it wrong.
Finding the selector behind forty re-renders
Async Redux
Requests, and the three states each one has
Why Async State is Different
74A request is not a value, it is a small state machine.
idle, pending, succeeded, failed - drawn out
Loading State
75Initial against refetching, and not flashing a spinner.
A skeleton that stays away on a fast response
Success State
76Storing the result, and clearing what the last attempt left.
A success that forgets to clear the previous error
Error State
77Where it lives, what to show, and how it gets cleared.
A failed save that leaves the form editable
createAsyncThunk
78One call generating three actions, and where they are handled.
extraReducers covering all three in one slice
Pending
79Marking the request in flight, and disabling what must be.
A submit button that cannot fire twice
Fulfilled
80Writing the payload in, and what else should reset.
Replacing a list against merging into it
Rejected
81rejectWithValue, and keeping the server message.
A 422 surfacing real field errors rather than "failed"
API Integration
82Keeping fetch out of slices, behind a service layer.
Swapping the HTTP client without touching a reducer
Error Handling
83Network against HTTP against validation, and what each shows.
Three failures, three different screens
Request Parameters
84Arguments into a thunk, and reading state inside one.
A paginated fetch that knows the current page
Authentication Requests
85Login, token storage, and rehydrating on reload.
Staying logged in across a refresh
Redux Middleware
The seam every action passes through
What is Middleware?
86Where it sits, what it sees, and what it may do.
The store, next, action signature explained once
Redux Middleware Pipeline
87Order, next(), and what happens if you forget to call it.
An action that silently never reaches a reducer
Built-in Middleware
88What Toolkit turns on, and the warnings it produces.
The non-serializable value warning, and what it is protecting
Custom Middleware
89Writing one properly, and when a thunk is the better answer.
Six lines that log every action
Logging Middleware
90Before and after state, grouped readably.
A log you can actually scan during a bug hunt
Async Middleware
91How thunk works underneath, written from scratch.
Twelve lines that explain the whole trick
Error Middleware
92Catching rejected actions in one place and reporting them.
Every failed thunk reaching the logger automatically
Authentication Middleware
93Reacting to a 401 centrally rather than in every thunk.
One expired token logging the user out everywhere
Middleware Best Practices
94Keeping it thin, ordered, and testable.
A middleware that grew into business logic
RTK Query
Treating the server as a cache, not as state you own
What is RTK Query?
95A cache with hooks, built on the store you already have.
Where the cache actually lives in state
Why RTK Query?
96What it replaces - a slice, a thunk, and three loading flags.
Deleting an entire async slice
API Slice
97One slice per API, and where it is registered.
Adding the reducer and middleware in configureStore
createApi
98Endpoints, generated hooks, and the shape of the definition.
Four endpoints and eight hooks from one object
fetchBaseQuery
99Base URL, headers, and attaching auth in one place.
Reading the token from state for every request
Queries
100Defining reads, and the arguments that key them.
A course list with no reducer written at all
Mutations
101Writes, their lifecycle, and what happens after they land.
Creating a course and seeing the list update itself
Query Hooks
102The generated hook return shape, read properly.
isLoading against isFetching, and when each is true
Loading States
103First load, refetch, and keeping previous data on screen.
Paging without the table collapsing between pages
Error States
104The error shape, narrowing it, and retrying.
Distinguishing a network failure from a 404
Caching
105Cache keys, lifetimes, and what a cache hit looks like.
Navigating back to a screen that renders instantly
Cache Invalidation
106Marking data stale after a write, and how wide to go.
Refreshing one list without refetching the whole app
Tags
107providesTags and invalidatesTags, including per-id tags.
Editing one user refreshing only that user
Optimistic Updates
108Showing the result before the server agrees - and rolling back.
A toggle that reverts when the request fails
Polling
109Refetching on an interval, and turning it off when hidden.
A dashboard that stops polling in a background tab
Pagination
110Page and cursor strategies, and merging pages.
Infinite scroll without losing what is already loaded
Redux Authentication
Who the user is, held in one place
Authentication State
111What belongs in the auth slice, and what does not.
A slice with three fields rather than eleven
Login
112The thunk, the pending UI, and what lands in state.
A login form wired to a real endpoint
Logout
113Clearing slices, clearing the RTK Query cache, ending the session.
Logging out without leaving the previous user cached
Current User
114One selector the whole app reads the user through.
selectCurrentUser used in nine components
Access Token
115Where to keep it, and attaching it to every request once.
prepareHeaders reading straight from state
Refresh Token
116Renewing silently, and the queue problem when several calls fail at once.
Three requests hitting a 401 and one refresh going out
Authentication Persistence
117Surviving a reload without trusting what you stored.
Rehydrating, then verifying against the server
Protected Routes
118Gating screens on auth state, and the flash before it is known.
Rendering nothing until the session resolves
Role-Based Access
119Roles in state for UX, enforced on the server for safety.
An admin route hidden and still checked
Permission-Based UI
120Finer-grained than roles, kept readable with a selector.
A can() selector used across a toolbar
Handling Expired Sessions
121Detecting expiry, telling the user, and not losing their work.
An expired token mid-form, handled gracefully
Redux State Architecture
Shaping state so reading it stays cheap
Designing Redux State
122Flat, minimal, and shaped for reads - with the trade-offs named.
Sketching a store before writing a slice
Feature-Based State
123One slice per feature, with boundaries you can point at.
A store whose keys match the features folder
Normalized State
124Storing by id instead of in nested arrays.
Updating one user that appears in four lists
Nested State
125When nesting is fine, and the depth at which it stops being.
A four-level spread as the signal to flatten
Entity State
126The ids-and-entities shape, and why it is the default.
Reordering a list by touching only the ids array
createEntityAdapter
127The reducers and selectors it hands you for free.
Replacing forty lines of id bookkeeping
State Ownership
128Exactly one slice owns each piece of data.
Two slices both storing the current user
Avoiding Duplicate State
129The copies that drift, and how to spot them early.
A count stored beside the list it counts
Derived State
130Computing at read time rather than storing another copy.
Deleting a field and adding a selector
State Shape Best Practices
131The rules worth writing down for a team.
A one-page convention the whole repo follows
Advanced Redux Patterns
Composition, and codebases that keep growing
Feature Slices
132A slice as a feature boundary, not just a state key.
Moving one feature out without touching the others
Slice Composition
133Building larger behaviour from smaller slices.
Two slices that stay independent but cooperate
Reusable Reducers
134Factories for the shapes you write over and over.
One paginated-list reducer used by three features
Reusable Selectors
135Parameterised selectors, and the memoisation trap in them.
Why one memoised selector per component instance is needed
Dynamic Reducers
136Injecting reducers after the store exists.
A reducer registered when a route loads
Code Splitting Redux
137Keeping feature code out of the initial bundle.
An admin slice that only admins download
Lazy-loaded Redux Features
138Loading slice, API, and UI together as one unit.
A feature that arrives complete or not at all
Cross-slice Communication
139One action, several slices - without importing each other.
A logout three slices each respond to
Advanced Middleware Patterns
140Listener middleware, and reacting to state rather than actions.
Saving a draft whenever the form settles
Large Application Architecture
141Conventions that survive fifty slices and several teams.
A structure that still makes sense two years in
Redux Performance
Where the cost is, measured rather than guessed
Understanding Redux Re-renders
142What actually triggers a component to run again.
Counting renders before changing a line
Selector Performance
143Reference equality, and the new object that defeats it.
A selector returning a fresh array every call
Memoized Selectors
144Where memoisation helps, and where it only adds cost.
Measuring before and after, honestly
createSelector
145Its cache of one, and what silently invalidates it.
A shared selector thrashing between two components
Avoiding Unnecessary Updates
146Selecting narrowly, and shallow equality where it fits.
One component subscribing to the whole store
Normalized State
147Why the shape itself is a performance decision.
An update touching one entity instead of a whole array
Large Collections
148Thousands of rows in the store, and rendering few of them.
Virtualising a list backed by entity state
Redux DevTools Performance
149What the extension costs, and turning it off in production.
A profile that was really measuring devtools
RTK Query Caching
150Cache lifetimes as a performance lever.
Tuning keepUnusedDataFor for a tabbed screen
Performance Best Practices
151The short list that accounts for most real wins.
A checklist applied to a slow dashboard
Redux Testing
The part of an app that is genuinely easy to test
Testing Redux
152What is worth testing here, and what is not.
Deleting a test that only restated the reducer
Testing Reducers
153Pure functions in, pure functions out - no mocks needed.
Six assertions covering a whole slice
Testing Actions
154Creators and prepare callbacks, where they hold logic.
Testing the id generation inside prepare
Testing Selectors
155Derived output, including the memoised path.
Proving a selector does not recompute
Testing Async Thunks
156All three outcomes, against a mocked network.
Pending, fulfilled, and rejected each asserted
Testing RTK Query
157MSW at the boundary, and asserting on cache behaviour.
A test that survives changing the endpoint
Testing Redux and React
158Rendering with a real store and driving it through the UI.
A helper that wraps render in a Provider
Mocking API Calls
159Mocking the network, not your own modules.
One handler serving every test in the file
Integration Testing
160Several slices and components together, where bugs live.
Login, fetch, and render in one test
Test Architecture
161Factories, fixtures, and tests that survive refactors.
A store factory used by the whole suite
Production Redux Architecture
What it takes to run this in front of real users
Redux Project Structure
162Where the store, slices, selectors, and API layer live.
app/, features/, services/ - and why
Feature-Based Architecture
163Grouping by what it does, with boundaries you can enforce.
An import lint rule that keeps features apart
API Layer
164One place per resource, typed, with no fetch in a component.
Changing the base URL in exactly one file
Authentication Architecture
165Slice, middleware, and API working as one design.
The whole auth path drawn on one page
Error Handling
166One strategy across thunks, queries, and boundaries.
Every failure path in the app, mapped
Logging
167What to record, what to redact, and where it goes.
An action log that does not leak a token
Persistence
168Persisting selectively, and migrating a stored shape.
A release that changes state shape without breaking users
Environment Configuration
169Per-environment values, kept out of the bundle where they must be.
One build promoted through three environments
Security Considerations
170Tokens in state, devtools in production, and what is visible.
Finding the access token in a devtools export
Production Best Practices
171The decisions worth making before launch, not after.
A pre-launch review of a real store
Real-World Redux Project
Admin management platform, built end to end
Project Setup and Architecture
172React, TypeScript, Redux Toolkit, RTK Query, Router, Hook Form, Zod.
The folder structure agreed before any feature
Authentication
173Login, tokens, persistence, and protected routes.
A session that survives a reload
Dashboard
174Several queries on one screen, loading independently.
Four widgets that do not block each other
Users
175An entity-adapter list with detail and edit.
Editing a user visible in three places at once
Roles and Permissions
176Modelling them in state, and gating the UI from selectors.
A toolbar that changes per role
Products
177A second resource, sharing the patterns of the first.
The users feature copied and adapted in an hour
Search, Filters, and Pagination
178Query state in the URL, cached per combination.
A filtered page you can share as a link
CRUD and Finishing
179Optimistic writes, invalidation, and a final review.
Delete that rolls back when the server refuses
Capstone Project
A multi-tenant learning platform
Capstone Architecture
180Planning the slices and the API surface for a real product.
The store diagram before the first commit
Authentication and Current User
181Sign-in, session, and the user every screen reads.
One selector behind the whole app shell
Tenancy
182Tenant selection, and scoping every request to it.
Switching tenant and watching the cache clear
Permissions
183Per-tenant roles, and UI that follows them.
The same user seeing two different apps
Courses, Modules, and Lessons
184A three-level hierarchy, normalized rather than nested.
Loading one lesson without fetching the whole course
Enrollment and Progress
185Writes that must feel instant, and reconcile correctly.
Marking a lesson complete offline and syncing later
Notifications and UI State
186The genuinely client-side state, kept separate from server data.
A toast queue that is nobody else business
Final Build and Review
187Assembled, tested, and reviewed against the original plan.
The finished app, and what you would change next time