combineReducersでハマったメモ

reduxの勉強にとおもって、簡単なカウンターアプリを１から作ってみたんだけれど、
reducerの分割時にcombineReducers()でしばらく悩んだので書き残しておきます。

返却値

まずはreducerが１つの場合

/reducer/counter.js

const initialState = {
    count: 0,
};

function counter(state = initialState, action) {
...
    default:
        return state;
    }
}

export default counter;

/reducer/index.js

import counter from './counter';

export default counter;

/app.js

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from './reducer';

let store = createStore(reducer);

console.log(store.getState());

render(
    <Provider store={store}>
        <RootComponent />
    </Provider>,
    document.querySelector('#app')
);

この状態で途中に記述してあるconsole.log()の返却値は

Object {
  count: 0
}

次にreducerを分割するために、２つに増やした場合

combineReducers()を使って２つのreducerをｶﾞｯﾁｬﾝｺしてからexportします。

/reducer/index.js

import {combineReducers} from 'redux';
import counter from './counter';
import counterB from './counterB';

const reducer = combineReducers({
    counter,
    counterB
});

export default reducer;

そうすると、app.js側のconsole.log()の返却値は

Object {
  counter: {
    count: 0
  },
  counterB: {
    countB: 0
  }
}

Objectが一階層ネストされて返却されます。
これを発見するのにしばらく悩みました。

Component側のmapStateToPropsに注意

Component側でstateをひも付けてやる必要があるんですが、その際に

１つの場合はこれでいいんですが、

const mapStateToProps = (state) => {
    return {
        count: state.count
    };
};

combineReducers()を使った場合には、ネストされた分を考慮してやる必要があります。

const mapStateToProps = (state) => {
    return {
        count: state.counter.count
    };
};

---

オブジェクト構造を蔑ろにして実装を進めていくと、くだらない所でこける気がしたのでご注意を。
あとthisとか特に。