Redux #5 redux 모듈 만들고 모아진 상태 확인해보기

1. modules 폴더에 리듀서를 나눠서 작성한다.
2. modules/index.js에서 combineReducers를 이용해서 reducer를 합쳐준다.(아래 예제에서 rootReducer)
3. index.js에서 createStore에다가 파라미터로 합친 reducer를 전달해준다. 그렇게 만든 store를 Provider에 props으로 넣어준다.

modules/counter.js

// 액션 타입 선언
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

const initialState = {
  number: 0,
  diff: 1,
};

// 액션 생성 함수
export const setDiff = diff => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// reducer
export default function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        number: state.number + state.diff,
      };
    case DECREASE:
      return {
        ...state,
        number: state.count - state.diff,
      };
    case SET_DIFF:
      return {
        ...state,
        diff: action.diff,
      };
    default:
      return state;
  }
}

modules/todos

const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';

let nextId = 1;

export const addTodo = text => ({
  type: ADD_TODO,
  todo: {
    id: nextId++,
    text,
  },
});

export const toggleTodo = id => ({
  type: TOGGLE_TODO,
  id,
});

const initialState = [
  // {
  //   id: 1,
  //   text: 'text',
  //   done: true
  // }
];

export default function todos(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.todo];
    case TOGGLE_TODO:
      return state.map(item => (item.id === action.id ? { ...item, done: !item.done } : item));
    default:
      return state;
  }
}

modules/index.js

import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';

const reducer = combineReducers({ counter, todos });
export default reducer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './modules';

const store = createStore(rootReducer);
console.log(store.getState()); // 객체 안에 만든 상태 2개가 들어가있는 것을 볼 수 있다.

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);