Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
65
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@usagi-f

combineReducersでハマったメモ

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とか特に。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
65
Help us understand the problem. What are the problem?