JS Built-ins
← redux-legacy12 / 22
redux-legacyrootReducerintermediate

Root Reducer Pattern

📖 Usage Example
function rootReducer(state = {}, action) {
  return {
    counter: counterReducer(state.counter, action),
    name: nameReducer(state.name, action),
  }
}

Manually building a root reducer clarifies how combineReducers works under the hood.

Root Reducer Pattern

A root reducer combines multiple sub-reducers by manually routing state slices:

function rootReducer(state = {}, action) {
  return {
    counter: counterReducer(state.counter, action),
    name: nameReducer(state.name, action),
  }
}

Each sub-reducer only sees and manages its own slice. The root reducer assembles the final state object.

Challenge: Implement counterReducer, nameReducer, and rootReducer that compose them together.

💡 Hints (2)
  • • Each sub-reducer handles its default state independently with `state = 0` or `state = ''`.
  • • The root reducer passes `state.counter` to `counterReducer` — it only sees its own slice.