redux-tutorial/05_combine reducers

15 Mar 2020

👉 https://github.com/happypoulp/redux-tutorial/wiki

Tutorial 05 - combine reducers

reducer 가 뭔지 이해하기 시작했다…

var reducer_0 = function (state = {}, action) {
    console.log('reducer_0 이 전달받은 상태', state, '와 액션', action)

    switch (action.type) {
        case 'SAY_SOMETHING':
            return {
                ...state,
                message: action.value
            }
        default:
            return state;
    }
}

… 그런데 더 나아가기전에, 만약 엄청 많은 액션들이 있다면 reducer들이 어떻게 받을 지 고민해봐야한다:

var reducer_1 = function (state = {}, action) {
    console.log('reducer_0 이 전달받은 상태', state, '와 액션', action)

    switch (action.type) {
        case 'SAY_SOMETHING':
            return {
                ...state,
                message: action.value
            }
        case 'DO_SOMETHING':
            // ...
        case 'LEARN_SOMETHING':
            // ...
        case 'HEAR_SOMETHING':
            // ...
        case 'GO_SOMEWHERE':
            // ...
        // etc.
        default:
            return state;
    }
}

이렇게는 단 하나의 reducer 함수가 애플리케이션의 모든 액션들을 다룰 수 없다 (할 수는 있겠지만, 이대로 유지할 순 없다…).

다행히 Redux는 reducer 가 하나인지 여러개인지 신경쓰지않고, 많을 땐 그것들을 합칠 수 있게 도와준다.

reducer 2개를 선언해보자.

var userReducer = function (state = {}, action) {
    console.log('userReducer 이 전달받은 상태', state, '와 액션', action)

    switch (action.type) {
        // etc.
        default:
            return state;
    }
}
var itemsReducer = function (state = [], action) {
    console.log('itemsReducer 이 전달받은 상태', state, '와 액션', action)

    switch (action.type) {
        // etc.
        default:
            return state;
    }
}

각 리듀서에 주입된 초기 상태값을 잘 보면: userReducer는 객체리터럴({})의 형태인 반면 itemsReducer 는 초기 상태값으로 배열([]) 을 받았다. 이것은 단순히 리듀서는 어떤 타입의 데이터 구조도 받을 수 있다는 것을 보여주기 위함이다. 어떤 데이터 구조를 선택할 지는 그때 그때 다르다 (객체, 배열, boolean, string, immutable structre, …).

이런식으로 여러개의 redcuer 접근 방식으로 각 reducer가 애플리케이션 상태의 일부만을 다루게된다.

하지만 알다시피, createStore는 오직 하나의 reducer 함수를 받는다.

어떻게 reducer 들을 합칠 수 있을까? 그리고 어떻게하면 Redux가 각 reducer들을 상태의 일부만 다루게 할 수 있을까? 간단하다. Redux의 combineReducers 함수를 사용한다. combineReducers는 해시를 가지고 함수를 리턴하고, 실행할 때 모든 reducer들을 호출하고, 새로운 상태 조각들을 Redux가 갖고있는 하나의 상태 객체(단순한 해시 {})로 조합한다. 얘기가 길었는데 이런식으로 reducer 가 여러개일 때 Redux 인스턴스를 만든다:

import { createStore, combineReducers } from 'redux'

var reducer = combineReducers({
    user: userReducer,
    items: itemsReducer
})
// Output:
// userReducer 이 전달받은 상태 {} 와 액션 { type: '@@redux/INIT' }
// userReducer 이 전달받은 상태 {} 와 액션 { type: '@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i' }
// itemsReducer 이 전달받은 상태 [] 와 액션 { type: '@@redux/INIT' }
// itemsReducer 이 전달받은 상태 [] 와 액션 { type: '@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i' }
var store_0 = createStore(reducer)
// Output:
// userReducer 이 전달받은 상태 {} 와 액션 { type: '@@redux/INIT' }
// itemsReducer 이 전달받은 상태 [] 와 액션 { type: '@@redux/INIT' }

output을 보면 알겠지만, 각 reducer는 초기 액션 @@redux/INIT을 정확하게 호출했다. 그런데 다른 액션은 뭐지? combineReducers에서 실행된 sanity check 이다. 이것은 reducer가 상태를 리턴할 때 undefined가 아니라는 것을 확인한다. combineReducers에서 init action의 첫번째 호출 또한 같은 목적을 공유한다. (sanity check 를 하는 것)

console.log('초기화 이후 store_0 의 상태:', store_0.getState())
// Output:
// 초기화 이후 store_0 의 상태: { user: {}, items: [] }

Redux가 각 상태들을 완벽하게 처리하고 있다. 마지막 상태는 실제로 userReducer와 itemsReduces로 만들어진 단순한 해시다.

{
    user: {}, // {} userReducer 에서 리턴된 조각
    items: [] // [] itemsReducer 에서 리턴된 조각
}

reducer들의 상태를 특정 값(userReducer는 {}, itemsReducer는 [])으로 초기화했기때문에 마지막 상태에서 이 값이 나온 것은 당연하다.

이제 reducer 가 어떻게 동작하는지 알게되었으니까 액션을 dispatch했을 때 Redux 상태에 영향을 주는 것을 봐보자.

다음: 06_dispatch-action.md

redux