React Redux Tutorials - 10 - Combine Reducers

How to combine the cake reducer and the ice cream reducer?

Redux provides a method called combineReducers to combine multiple reducers into a single reducer which can then be passed to the createStore method.

const redux = require('redux');
const createStore = redux.createStore;
const combineReducers = redux.combineReducers;

const BUY_CAKE = 'BUY_CAKE' 
const BUY_ICECREAM = 'BUY_ICECREAM'


function buyCake() {
  return {
    type: BUY_CAKE,
    info: 'first redux action'
  }
}

function buyIceCream() {
  return {
    type: BUY_ICECREAM,
  }
}

// (1) split the initialState into two

// const initialState = {
//   numOfCakes: 10, 
//   // (1) add another property
//   numOfIceCreams: 20
// }

const initialCakeState = {
  numOfCakes: 10
}

const initialIceCreamState = {
  numOfIceCreams: 20
}

// (2) split the reducer into two

// const reducer = (state = initialState, action) => {
//   switch(action.type) {
//     case BUY_CAKE: return {
//       ...state,
//       numOfCakes: state.numOfCakes - 1
//     }
//     // (2) another switch case
//     case BUY_ICECREAM: return {
//       ...state,
//       numOfIceCreams: state.numOfIceCreams - 1
//     }
//     default: return state  
//   }
// }

const cakeReducer = (state = initialCakeState, action) => {
  switch(action.type) {
    case BUY_CAKE: return {
      ...state,
      numOfCakes: state.numOfCakes - 1
    }
    default: return state  
  }
}

const iceCreamReducer = (state = initialIceCreamState, action) => {
  switch(action.type) {
    case BUY_ICECREAM: return {
      ...state,
      numOfIceCreams: state.numOfIceCreams - 1
    }
    default: return state  
  }
}

// (3) combine two reducers (after get hold the method from redux at the top)
// the convention is to call the combination of all the reducers as the rootReducer.
// combineReducer accpets an object.
const rootReducer = combineReducers({
  cake: cakeReducer,
  iceCream: iceCreamReducer
})

// (4) create store accepts the rootReducer as its parameter.
const store = createStore(rootReducer);

console.log('Initial State', store.getState());

const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState()))

store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyIceCream());
store.dispatch(buyIceCream());

unsubscribe();

Node index

Initial State { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 20 } }
Updated state { cake: { numOfCakes: 9 }, iceCream: { numOfIceCreams: 20 } }
Updated state { cake: { numOfCakes: 8 }, iceCream: { numOfIceCreams: 20 } }
Updated state { cake: { numOfCakes: 7 }, iceCream: { numOfIceCreams: 20 } }
Updated state { cake: { numOfCakes: 7 }, iceCream: { numOfIceCreams: 19 } }
Updated state { cake: { numOfCakes: 7 }, iceCream: { numOfIceCreams: 18 } }

이제 state.cake.numOfCakes로 numOfCakes에 접근해야 한다.

위와 같이 두 개의 리듀서를 combine하여 사용할 때, 액션을 디스패치하면 두 개의 리듀서 모두 액션을 전달받기는 하지만, 그 액션에 해당하는 리듀서만 실행되고 다른 리듀서는 전달받은 액션을 무시한다.

🔗 React Redux Tutorials - 10 - Combine Reducers