Reducer Composition

Combine multiple reducers and organize your Redux state structure effectively.

20 min

2 sections

reducers

combinereducers

structure

01. Combining Reducers

Section 1 of 2

Split your state into multiple reducers, each managing a specific slice. Combine them for the root reducer.

typescript

import { combineReducers } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';
import userReducer from './userSlice';
import uiReducer from './uiSlice';

const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer,
  ui: uiReducer,
});

// Or with configureStore (simpler!)
const store = configureStore({
  reducer: {
    todos: todosReducer,
    user: userReducer,
    ui: uiReducer,
  },
});

Exercise

Combine Reducers

Practice

Create a store that combines todos, user, and settings reducers.

Action Creators & Payload

Normalized State

Back to Course