Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

Lazy Loaded Reducers

Definition

The exact implementation technique for dynamically adding Redux slices to a store at runtime.

Explain Like I'm New

Creating a custom `injectReducer` function on your store object that takes a string (the slice name) and a function (the reducer), and rebuilds the global state tree.

Real World Example

Writing a Higher Order Component (HOC) called `withReducer(key, reducer)` that wraps around a React Page. When the Page mounts, it injects the reducer. When the Page unmounts, it leaves the data in the store as a cache.

Common Use Cases

  • •Advanced performance tuning

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • If you inject a 'dashboard' reducer dynamically, will it delete the existing 'auth' reducer data?

intermediate

  • Why do you need to keep a dictionary of 'asyncReducers' when dynamically injecting?

Flash Cards

Question

Delete existing data?

Click to reveal answer
Answer

No, if done correctly. `combineReducers` merges the new reducer with the existing ones, preserving the existing state.

Question

Why asyncReducers dictionary?

Click to reveal answer
Answer

Because `combineReducers` requires an object containing ALL current reducers. You have to keep a running list of `staticReducers` (core) and `asyncReducers` (injected), combine them together, and pass them to `replaceReducer`.