Redux.combineReducers를 사용하고 Reducers를 나누어보자

TOC

1. store를 나누자

2. 예시

3. 중요한 점

.
├── actions
│   ├── log.js
│   └── post.js
├── reducer
│   ├── index.js
│   ├── log.js
│   └── post.js
└── store.js

간단한 Redux를 설정하는데도 많은 줄의 코드가 필요하다.

아래의 간단한 store만 해도 logIn, logOut, add post 기능 3개만을 관리하는데 90줄에 가까운 코드가 쌓이게 된다.

코드가 길면 해독이 어렵고 정신이 혼미해지다 기괴한 코드를 짜내기 마련이다.

따라서 store를 action, reducer, store 세가지로 나누어 관리를 해보자.
state를 잘 관리하기 위해 store부터 깔끔하게 관리하자는 것이다.

const { createStore } = require("redux");

const reducer = (prevState, action) => {
  switch (action.type) {
    case "LOG_IN":
      return {
        ...prevState,
        isLogIn: true,
        userId: action.data.userId,
        data: action.data
      };
    case "LOG_OUT":
      return {
        ...prevState,
        isLogIn: false
      };
    case "ADD_POST":
      return {
        ...prevState,
        posts: [...prevState.posts, action.data]
        // data: action.data,
      };
    default:
      return initialState;
  }
};
const initialState = {
  isLogIn: false,
  userId: null,
  posts: []
};

const store = createStore(reducer, initialState);

const logIn = (data) => {
  return {
    type: "LOG_IN",
    data
  };
};
const logOut = (data) => {
  return {
    type: "LOG_OUT",
    data
  };
};
const addPost = (data) => {
  return {
    type: "ADD_POST",
    data
  };
};

store.dispatch(
  logIn({
    userId: "blackNut",
    PWD: "123123"
  })
);

console.log("1st,", store.getState());

store.dispatch(
  addPost({
    post: "1st, MUYAHO😱"
  })
);

console.log("2nd,", store.getState());
store.dispatch(
  addPost({
    post: "2nd, MUYAHO😱"
  })
);

console.log("3rd,", store.getState());
store.dispatch(logOut({}));

console.log("4th,", store.getState());

우선 어떻게 나눌 것인지를 생각해보자.

1. 관심사를 기준으로 나누자.

위의 경우 logIn관련, post관련으로 나누는게 좋겠다.

• reducer는 logReducer, postReducer로 나눌것이다.
• action은 logAction, postAction으로 나눌것이다.

2. 예시

위의 예시는 폴더 구조를 보아야 한다.

.
├── actions
│   ├── log.js
│   └── post.js
├── reducer
│   ├── index.js
│   ├── log.js
│   └── post.js
└── store.js

이런식으로 store에서 불러올 reducer는 reducer 폴더의 index.js이며
index.js는 쪼개진 reducer들을 combineReducers로 묶어서 store.js에 반환한다.

actions는 그냥 함수를 쪼개 module화 한것에 지나지 않기 때문에 별로 볼 것은 없다.

중요한 점

중요한 점은 reducer가 갈라지면서 생긴다.

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

    default:
      return prevState;
  }
};

module.exports = { postReducer };

postReducer를 따로 떼어 만든 reducer이다.

눈여겨 볼 점은

1. initialState를 새로 만들어준다
2. prevState=initialState

이 두가지인데 갈라진 reducer는 이제 initialState를 해당 module의 initialState를 참조하므로 return 값을 조정해주어야 한다는 것이다.

before

    case "ADD_POST":
      return {
        ...prevState,
        posts: [...prevState.posts, action.data]
        // data: action.data,
      };

after

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

    default:
      return prevState;
  }
};

갈라져 나온 postReducer는 initialState가 module 내부의 변수를 가리키므로 return 값을 변경해주어야 한다.