Redux reducer redux.combineReducers

TOC

1. combineReducers

2. How to use

1. combineReducers

redux를 사용하여 데이터를 중심으로 구조를 나누다 보면
reducer는 쪼개지지 못한채 계속 키가 커져간다.

reducer도 쪼갤 수 있다.

reducer를 쪼갠 뒤 마치 webpack처럼 묶어주는 combineRedcuers를 배워보자

2. How to use

// logIn reducer
const userReducer = (prevState, action) => {
  switch (action.type) {
    case 'LOG_IN':
      return {
        ...prevState,
        user: action.data.user,
        isLoggedIn: action.data.isLoggedIn,
        name: action.data.name,
        address: action.data.address,
      };
    case 'LOG_OUT':
      return {
        ...prevState,
        user: null,
        isLoggedIn: false,
        name: null,
        address: null,
      };
    default:
      return {
        prevState,
      };
  }
};

module.exports = userReducer;

const postReducer = (prevState, action) => {
  switch (action.type) {
    case 'ADD_POSTS':
      return {
        ...prevState,
        posts: [...prevState, action.data.posts],
      };

    default:
      return {
        ...prevState,
      };
  }
};
module.exports = postReducer;

reducer를 LOG_X, POST를 기준으로 둘로 나누어보았다.

이제 원래 reducer가 있던 자리인 reducer.js는 텅텅 비어버릴 것이다.
redux에서 combineReducers를 불러오고 쪼개진 reducer도 모두 불러오자

그다음 exports를 할 때 combineReducers를 통해 묶어주면 된다.

const { combineReducers } = require('redux');
const { userReducer } = require('./userReducer');
const { postReducer } = require('./postReducer');

module.exports = combineReducers({
  user: userReducer,
  posts: postReducer,
});

아직 끝난게 아니다.



아래는 원래 initialState이다.

const initialState = {
  user: null,
  posts: [],
  isLoggedIn: false,
  name: null,
  address: null,
};

combineReducer로 나누어준 module에서 해당 module의 기본 initialState를 정의 해주자

const initialState = [
  {
    posts: [],
  },
];
const postReducer = (prevState = initialState, action) => {
  switch (action.type) {
    case 'ADD_POSTS':
      return [...prevState, action.data];

    default:
      return prevState;
  }
};
module.exports = postReducer;

// 이렇게 작성해도 된다. 21/05/25 추가
const initialState = [];
const postReducer = (prevState = initialState, action) => {
  switch (action.type) {
    case 'ADD_POSTS':
      return [...prevState, action.data];

    default:
      return prevState;
  }
};
module.exports = postReducer;

module화 한 reducer에서 사용될 initialState를 추가해주고
prevState값으로 초기화 해준다.

reducer를 모듈화 하는 중에 자잘하게 변경해주어야 하는 부분이 많다.

예를 들면

const { combineReducers } = require('redux');
const userReducer = require('./userReducer');
const postReducer = require('./postReducer');

module.exports = combineReducers({
  user: userReducer,
  posts: postReducer,
});

root reducer는 exports가 reducer 단일 function이 아닌 require로 module전부를 불러와야 한다는 점 , 따라서

const {reducer} = require(...);
-> const reducer = require(...);

const userReducer = (prevState = initialState, action) => {
  switch (action.type) {
    case 'LOG_IN':
      return {
        ...prevState,
        data: action.data,
      };
      ...

slice된 reducer는 따로 initialState를 가지므로 switch 혹은 if문 내부의 return값의 관계를 수정해야 할 수 있다.

error msg가 잘 알려주므로 적극 검색해보자.