combineReducer

combineReducer는 각각의 Reducer를 병합

Redux는 코드의 양이 길어진다는 단점이 있다. 즉 Action을 정의하다보면 switch ~ case문의 양이 점점 증가한다.

그래서 이러한 문제점을 해결하기 위해 State별로 각각의 Reducer파일을 정의하여 Action을 나눈 뒤 combineReducers로 각각의 리듀서를 병합하여 사용한다.

combineReducer의 사용방법은 다음과 같다.

combineReducer 사용방법

해당 예제의 reducer는 아래와 같으며 다음과 같은 순서로 combineReducer를 적용한다.

import { HYDRATE } from 'next-redux-wrapper';

const initialState = {  
  name: 'Mirrer',
  age: 20, 
};

export const changeName = (data) => {
  return {
    type: 'CHANGE_NAME',
    data,
  }
};

export const changeAge = (data) => {
  return {
    type: 'CHANGE_AGE',
    data,
  }
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
	  case HYDRATE:
      return {
        ...state,
        ...action.payload
      };
    case 'CHANGE_NAME':
    return {
      ...state,
      name: action.data,
    }
    case 'CHANGE_AGE':
      return {
        ...state,
        age: action.data,
      }
	default:
      return state;
  }
};

export default rootReducer;

1. initialState의 State를 개별 파일로 분할

// name.js
export const initialState = {  
  name: 'Mirrer',
};

export const changeName = (data) => {
  return {
    type: 'CHANGE_NAME',
    data,
  }
};

const reducer = (state = initialState, action) => {
  switch (action.type) {	  
    case 'CHANGE_NAME':
    return {
      ...state,
      name: action.data,
    }    
	default:
      return state;
  }
};

export default reducer;

// age.js
export const initialState = {  
  age: 20, 
};

export const changeName = (data) => {
  return {
    type: 'CHANGE_AGE',
    data,
  }
};

const reducer = (state = initialState, action) => {
  switch (action.type) {	  
    case 'CHANGE_AGE':
    return {
      ...state,
      age: action.data,
    }    
	default:
      return state;
  }
};

export default reducer;

2. 분할한 파일들을 combineReducers로 병합

분할한 파일이 반환하는 Reducer는 함수

// reducers/index.js
import { HYDRATE } from 'next-redux-wrapper';
import { combineReducers } from 'redux';

import name from './name'
import age from './age'

const rootReducer = combineReducers({
  index: (state = {}, action) => {
    switch (action.type) {
      case HYDRATE:
        return {
          ...state,
          ...action.payload
        };   
      default:
        return state;
    }
  },
  name,
  age,
}); 

export default rootReducer;

참고 자료

Redux 공식문서
React로 NodeBird SNS 만들기 - 제로초