Redux Course Built for AI-Paired Learning

This chapter focuses on The problem Redux was created to solve, Local, shared and server state, When Redux is the wrong choice and the practice needed to use these concepts confidently in real projects.

• The problem Redux was created to solve
• Local, shared and server state
• When Redux is the wrong choice
• Alternatives and how they compare
• The single store principle
• State as a plain object tree
• Read-only state
• Changes through pure functions
• The unidirectional data flow
• Actions and their shape
• Action type naming conventions
• Action creators
• Reducers as pure functions
• The reducer signature
• Handling unknown actions
• The store and its API
• dispatch, getState and subscribe
• Combining reducers
• State shape design
• Slices of state
• A first store without any library helpers
• Understanding what Redux Toolkit automates

This chapter focuses on Why Redux Toolkit is the standard approach, Installing and setting up, configureStore and the practice needed to use these concepts confidently in real projects.

• Why Redux Toolkit is the standard approach
• Installing and setting up
• configureStore
• Default middleware included
• DevTools integration by default
• createSlice
• Slice name, initial state and reducers
• Generated action creators
• Generated action types
• Exporting actions and the reducer
• Immer and mutable-looking updates
• What you may and may not do with Immer
• Returning new state instead of mutating
• prepare callbacks
• extraReducers and the builder
• Matching actions from other slices
• createAction for standalone actions
• createReducer
• Combining slices in the store
• Store type inference
• Typed dispatch and state
• Migrating legacy Redux to Toolkit

This chapter focuses on The React Redux bindings, The Provider component, useSelector and the practice needed to use these concepts confidently in real projects.

• The React Redux bindings
• The Provider component
• useSelector
• Selector return values and equality
• Avoiding new object references in selectors
• shallowEqual and custom comparators
• useDispatch
• Dispatching actions from components
• Typed hooks with TypeScript
• useStore and when it is needed
• Container and presentational split
• Connecting lists efficiently
• Passing ids instead of objects
• Selecting derived data
• Re-render behaviour explained
• Debugging unnecessary re-renders
• Multiple stores and why to avoid them
• Server rendering considerations
• Hydrating preloaded state
• Code splitting reducers
• Injecting reducers dynamically
• Testing connected components

This chapter focuses on Why selectors exist, Colocating selectors with slices, Input and output selectors and the practice needed to use these concepts confidently in real projects.

• Why selectors exist
• Colocating selectors with slices
• Input and output selectors
• createSelector and memoisation
• How memoisation works
• Selector cache size limits
• Parameterised selectors
• Selector factories per component
• createSelector with weakMapMemoize
• Composing selectors
• Selecting across multiple slices
• Avoiding expensive work in selectors
• Normalised state and lookups
• Selecting entity lists
• Sorting and filtering in selectors
• Computing totals and summaries
• Selectors and TypeScript inference
• Testing selectors
• Profiling selector performance
• Common selector mistakes
• When to compute in the component instead
• Refactoring duplicated derivations

This chapter focuses on Why reducers cannot be async, The middleware concept, How middleware wraps dispatch and the practice needed to use these concepts confidently in real projects.

• Why reducers cannot be async
• The middleware concept
• How middleware wraps dispatch
• Writing a simple logging middleware
• The thunk middleware
• Dispatching a function
• Accessing getState in a thunk
• createAsyncThunk
• Pending, fulfilled and rejected actions
• Handling lifecycle actions in extraReducers
• Loading and error state patterns
• The payload creator signature
• thunkAPI and its helpers
• rejectWithValue for typed errors
• Conditional dispatch with the condition option
• Cancelling a thunk
• AbortSignal integration
• Sequential and parallel requests
• Retry logic
• Race conditions and requestId
• Testing thunks
• When to move logic out of Redux entirely

This chapter focuses on Why nested state causes problems, Normalised state shape, Entities and ids arrays and the practice needed to use these concepts confidently in real projects.

• Why nested state causes problems
• Normalised state shape
• Entities and ids arrays
• createEntityAdapter
• Adapter CRUD reducers
• addOne, addMany and setAll
• updateOne and upsertMany
• removeOne and removeAll
• Sort comparers
• The adapter selectors
• selectAll, selectById and selectIds
• Combining adapter state with extra fields
• Relationships between entities
• Denormalising for display
• Pagination with normalised data
• Merging paged results
• Handling deletions and stale references
• Optimistic entity updates
• Rolling back failed updates
• Migrating nested state to normalised
• Testing entity reducers
• When normalisation is overkill

This chapter focuses on What RTK Query replaces, createApi and the base query, fetchBaseQuery configuration and the practice needed to use these concepts confidently in real projects.

• What RTK Query replaces
• createApi and the base query
• fetchBaseQuery configuration
• Adding auth headers
• Defining query endpoints
• Defining mutation endpoints
• Generated hooks
• Query arguments and cache keys
• The cache lifetime and keepUnusedDataFor
• Automatic refetching
• refetchOnMountOrArgChange
• refetchOnFocus and refetchOnReconnect
• Tags and cache invalidation
• providesTags and invalidatesTags
• Optimistic updates with onQueryStarted
• Pessimistic updates
• Manual cache updates with updateQueryData
• Pagination and infinite queries
• Transforming responses
• Error handling and retries
• Code generation from OpenAPI
• Choosing RTK Query or thunks

This chapter focuses on The middleware chain in detail, Writing custom middleware, Middleware ordering and the practice needed to use these concepts confidently in real projects.

• The middleware chain in detail
• Writing custom middleware
• Middleware ordering
• The listener middleware
• startListening and effect callbacks
• Matching actions with predicates
• takeLatest-style behaviour
• Debouncing and throttling effects
• Forking child tasks
• Cancelling listeners
• Cross-slice reactions
• Persisting state on change
• Analytics side effects
• Redux Saga overview
• Generators and saga effects
• Comparing sagas with the listener middleware
• Redux Observable overview
• Choosing a side-effect approach
• Serialisability checks
• Immutability checks in development
• Disabling checks for large state
• Testing middleware and listeners

This chapter focuses on Feature folder structure, The ducks pattern, Keeping slices small and focused and the practice needed to use these concepts confidently in real projects.

• Feature folder structure
• The ducks pattern
• Keeping slices small and focused
• Cross-feature dependencies
• Shared reducers and root actions
• Resetting state on logout
• Handling authentication state
• Persisting state to storage
• redux-persist configuration
• Rehydration and migrations
• Versioning persisted state
• Encrypting sensitive persisted data
• Undo and redo implementation
• Time-travel debugging
• Testing reducers
• Testing action creators
• Testing the store end to end
• Mock stores and their drawbacks
• Integration testing with a real store
• Testing RTK Query endpoints
• Common architecture mistakes
• Refactoring a growing store

This chapter focuses on Profiling Redux applications, Identifying expensive dispatches, Batching updates and the practice needed to use these concepts confidently in real projects.

• Profiling Redux applications
• Identifying expensive dispatches
• Batching updates
• Reducing state size
• Avoiding storing derived data
• Keeping non-serialisable data out
• Large lists and virtualisation
• Selective subscriptions
• DevTools performance overhead
• Production configuration
• Bundle size considerations
• Project: modelling the application state
• Project: building the slices
• Project: wiring the UI with hooks
• Project: async data with RTK Query
• Project: normalising entities
• Project: optimistic updates
• Project: persistence and auth flows
• Project: tests for reducers and effects
• Project: performance review
• Project: documentation
• Project: final walkthrough