Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

Root Reducer

Definition

The top-level reducer function that combines multiple smaller, specialized reducer functions into a single reducer that manages the entire global state tree.

Explain Like I'm New

You don't want one massive 10,000-line reducer file managing the users, the shopping cart, and the dark mode theme. You split them up into `userReducer`, `cartReducer`, and `themeReducer`. The Root Reducer glues them all back together into one giant robot.

Real World Example

Using the `combineReducers()` utility. The resulting global state object will have keys that match the individual reducers, like `state.users`, `state.cart`, and `state.theme`.

Common Use Cases

  • •Structuring large applications logically
  • •Separation of concerns

Interactive Example

import { combineReducers } from 'redux';
import userReducer from './userSlice';
import cartReducer from './cartSlice';

// The Root Reducer combines the smaller slices
const rootReducer = combineReducers({
  user: userReducer, // This state will live at state.user
  cart: cartReducer  // This state will live at state.cart
});

export default rootReducer;

Interview Questions

basic

  • What legacy Redux function was used to glue reducers together?

intermediate

  • If an action is dispatched, does the Root Reducer send it to just one child reducer, or all of them?

Flash Cards

Question

Which legacy function?

Click to reveal answer
Answer

`combineReducers()`.

Question

One or all?

Click to reveal answer
Answer

ALL of them! Every single action passes through every single child reducer. If a child reducer cares about it, it reacts. If not, it hits its `default` switch case and ignores it.