5. Reducer

  • 변화를 일으키는 함수
  • 순수해야 한다
    • http 요청같은 비동기 작업은 하면 안된다.
    • 전달받은 인수 변경하면 안된다.
    • 동일한 인수 = 동일한 결과.
    • ‘순수하지 않은’ API 사용 불가 (Date.now(), Math.random() 등)
  • 함수의 역활은 이전 상태와 액션을 받아서 다음 상태를 반환한다.
  • 어떤 작업을 할지 정보를 지니고 있는 객체 그것을 전달하면 새로운 상태를 반환한다. (이전 상태를 변경하는게 아님.)
  • 기존 상태를 복사하고 변화를 주고 액션에 따라서 반환한다.

reducers / counter.js 생성

// counter.js
import * as types from '../action/ActionTypes';

만약 state값이 여러개 일 경우, y의 값을 바꿀 경우

: dummyObj: { ...state.dumbObj, u : 0 }의 u의 값이 0으로 덮여씌여진다. 

// counter.js
import * as types from '../action/ActionTypes';

const initialState = {
    number : 0,
    dummy : 'dummy',
    dumbObj : {
        d : 0,
        u : 1,
        m : 2,
        b : 3
    }
};

export default function counter(state = initialState , action) {
    switch (action.type) {
        case type.INCREMENT :
            return {
                ...state,
                number: state.number + 1,
                dummyObj: { ...state.dumbObj, u : 0 }
            };
        case type.DECREMENT :
            return {
                ...state,
                number: state.number - 1
            };
        default :
            return state;
    }    
};

reducers / ui.js 생성

  • color를 담당.
  • 리듀서가 두개 이상일 경우 하나로 합쳐줘야 한다. => index.js 생성해서 combineReducers 이용해서 합침.
import { combineReducers } from 'redux';
import counter from './counter';
import ui from './ui';

const reducers = combineReducers({
    counter, ui
});

export default reducers;

code & view