React강좌3 - Redux3. Reducers

변화를 일으키는 함수

순수해야함

 

비동기 X

전달받은 인수변경 X

동일한 인수 = 동일한 결과

 

이전상태와 액션을 받아서 다음상태를 반환한다. (이전상태 변경이 아님)

(previous State, Action) => newState

 

SRC/Reducers 폴더안에 아래 3 파일을 만든다.

1. Counter.js (숫자 계산)

2. ui.js (색상 변경)

3. index.js (Reducer 통합)

 

1. Counter.js

import * as types from '../Actions/ActionTypes';

//초기상태 정하기

const initialState = {
    number: 0,   //최초 초기상태 정의
};

export default function counter(state = initialState, action) {  // 초기값 입력이 undefined일 때 initialState 할당

    switch (action.type) {
        case types.INCREMENT:
            return {
                ...state, // ...state에서 기존 정의한 state를 모두 복사해옴. 
                number: state.number + 1,     //그 중 number에 새 값 설정                
            };
        case types.DECREMENT:
            return {
                ...state,
                number: state.number - 1
            };
        default:
            return state;   // 기존 상태 그냥 전달. 이 세 케이스에 SET_COLOR가 없으므로 다른 reducer를 찾게 됨

    }

}

2. ui.js

import * as types from '../Actions/ActionTypes';

const initialState = {
    color: [255, 255, 255]
};

export default function ui(state = initialState, action) {
    if (action.type === types.SET_COLOR) {
        return {
            color: action.color
        }
    } else {
        return state;
    }
}

3. index.js

//reducer 합치는 파일
import { combineReducers } from 'redux';
import counter from './Counter';
import ui from './ui';

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

export default reducers;