modul_Redux

정의

리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미한다.

• 액션타입
• 액션 생성함수
• 리듀서

간단한 예제 코드

//액션타입 만들기
//ducks 패턴을 따를때는 액션의 이름에 접두사를 넣어줘야 한다
// 왜냐하면 다른 모듈과 액션이름이 중복되는것을 방지할 수 있다
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

//액션 생성함수 만들고 export 키워드를 사용해서 내보내기
export const setDiff = diff => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

//초기값
const initialState = {
  number: 0,
  diff: 1,
};

//리듀서 선언
export default counter = (state = initialState, action) => {
  switch (action.type) {
    case SET_DIFF:
      return {
        ...state,
        diff: action.diff,
      };
    case INCREASE:
      return {
        ...state,
        number: state.number + state.diff,
      };
    case DECREASE:
      return {
        ...state,
        number: state.number - state.diff,
      };
    default:
      return state;
  }
};

루트 리듀서

정의

• 리덕스 모듈이 두개 이상이여서 리듀서도 두개 이상일때 한 프로젝트에 하나의 리듀서만 있어야 하기 때문에 여러개의 리듀서를 하나로 합치는것을 의미한다
• 리덕스에 내장되어있는 combineReducers라는 함수를 사용한다

예제

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

const rootReducer = combineReducers({
  counter,
  todos
});

export default rootReducer;

//src/index.js
import rootReducer from './redux/index';
import { createStore } from 'redux';

//스토어 만들기
const store = createStore(rootReducer); 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);