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;
  }
};

巡視員

定義＃テイギ＃

例

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')
);