redux
の勉強にとおもって、簡単なカウンターアプリを1から作ってみたんだけれど、
reducerの分割時にcombineReducers()
でしばらく悩んだので書き残しておきます。
返却値
まずはreducerが1つの場合
/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を分割するために、2つに増やした場合
combineReducers()
を使って2つの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をひも付けてやる必要があるんですが、その際に
1つの場合はこれでいいんですが、
const mapStateToProps = (state) => {
return {
count: state.count
};
};
combineReducers()
を使った場合には、ネストされた分を考慮してやる必要があります。
const mapStateToProps = (state) => {
return {
count: state.counter.count
};
};
オブジェクト構造を蔑ろにして実装を進めていくと、くだらない所でこける気がしたのでご注意を。
あとthisとか特に。