redux실습2. reducer 기본

1. 환경 셋팅

1-1. 설치

$ npm install redux react-redux

 

1-2. 불러오기

const redux = require('redux')

 

 

 

3. 실습

3-1. 레벨1

(1) 코드

const redux = require('redux')
const {createStore} = redux


const reducer = (state, action) => {
    if (action.type === `O'brien`) {
        return { 
            name: 'conan'
        }
    } else if (action.type === 'cases_up'){
        return{
            ...state,
            cases: state.cases +1
        }

    } else {
        return { 
            name: 'Edogawa',
            cases: 0
        }
    }
}

const store = createStore(reducer)
console.log(store.getState())	//{ name: 'Edogawa', cases: 0 }

 

 

(2) 콘솔로 결과값 확인

store.dispatch({type:'change_name'})
//dispatch 호출 시, createStore의 첫번째 인자값인 reducer(리듀싱 함수) 실행
console.log(store.getState())	//{ name: "O'brien" }

store.dispatch({type:'cases_up'})
console.log(store.getState())	//{ name: "O'brien", cases: NaN }

 

 

 

의도한대로라면 case의 속성값이 +1이 되어야 하지만 NaN값으로 확인된다.

그 이유는 reducer(reducing 함수)가 순수함수이기 때문이다.

 

 

 

<참고>
reducer는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.
reducer는 이전 state를 변경(X)
새로운 state 객체를 '생성'해서 return함

 

 

의도한대로 case의 속성값을 +1 시키기 위해 아래와 같이

return에 스프레드 연산자를 사용해서 기존의 state를 복사해오자.

 

 

if (action.type === 'change_name') {
    return { 
        ...state,
        name: `O'brien`
    }

 

 

이후 다시 콘솔을 찍어보면 아래와 같이 나온다.

console.log(store.getState())		// { name: "O'brien", cases: 1 }

 

 

 

 

3-2. 레벨2 - 초기값 객체로 부여 및 조건절 switch로 변경

 

(1) 코드 작성

const initialState = {
    name: 'Edogawa',
    cases: 0
}

const reducer = (state, action) => {
    switch (action.type) {
        case 'change_name':
            return {
                ...state,
                name: `O'brien`
            }
        case 'cases_up':
            return {
                ...state,
                cases: state.cases +1
            }
        default:
            return {
                ...initialState
            }
    }
}

 

 

 

(2) 결과값 확인

console.log(store.getState())		// { name: 'Edogawa', cases: 0 }

store.dispatch({type:'change_name'})
console.log(store.getState())		// { name: "O'brien", cases: 0 }

store.dispatch({type:'cases_up'})
console.log(store.getState())		// { name: "O'brien", cases: 1 }