Redux Toolkit / Zustand

Manage client state in React apps with Redux Toolkit, RTK Query and Zustand: slices, async logic, caching, selectors, middleware, testing and choosing the right tool.

Start course →

What you'll learn

  • Tell local, server and global client state apart and decide when a store is worth it.
  • Build Redux Toolkit stores with configureStore, createSlice and typed React-Redux hooks.
  • Handle async work with createAsyncThunk, listener middleware and RTK Query caching.
  • Keep large stores fast with normalised entities, memoised selectors and DevTools.
  • Create, compose, persist and test Zustand stores in TypeScript, inside and outside React.
  • Choose between Redux Toolkit, Zustand and Context, debug re-renders and migrate legacy Redux.

Syllabus

State Management Foundations

  1. Local, Server and Global Client State
  2. When You Need a Store
  3. Unidirectional Data Flow and Immutability

Redux Toolkit Core

  1. configureStore
  2. createSlice, Actions and Immer
  3. Provider, useSelector and useDispatch

Async Logic in Redux

  1. createAsyncThunk Lifecycle
  2. Loading and Error State
  3. Listener Middleware and Side Effects

RTK Query

  1. createApi and Endpoints
  2. Caching, Tags and Invalidation
  3. Optimistic Updates and Polling

Redux Patterns That Scale

  1. Normalising Data with createEntityAdapter
  2. Memoised Selectors with createSelector
  3. Middleware and Redux DevTools

Zustand Essentials

  1. Creating a Store
  2. Selectors and Avoiding Re-renders
  3. Async Actions and the Slices Pattern

Zustand in Depth

  1. persist, devtools and immer Middleware
  2. Stores Outside React and with TypeScript
  3. Testing Stores

Choosing and Scaling

  1. Redux Toolkit vs Zustand vs Context
  2. Performance and Re-render Debugging
  3. Migrating Legacy Redux to Redux Toolkit
  4. A State Management Checklist