Reactアプリ内でのReduxの複数のReducerを一つにまとめる方法

1. combineReducers()をreduxからimportする。

src/reducers/index.js

import { combineReducers } from 'redux';

2. まとめたい他のreducerもimportする。

src/reducers/index.js

import { combineReducers } from 'redux';
import counterReducer from './counter'; // 追加
import loggedReducer from './isLogging'; // 追加

3. importしたcombineReducers()を使用してreducerをまとめる。そしてexport。

src/reducers/index.js

import { combineReducers } from 'redux';
import counterReducer from './counter';
import loggedReducer from './isLogging';

// coombine()を使ってreducerをまとめる。
const rootReducers = combineReducers({
  // key名はなんでも。任意のものでいい。
  counter: counterReducer,
  isLoggedIn: loggedReducer
  // ちなみに、ES6のプロパティ名のショートハンドを使用して以下のようにも書ける
  // counterReducer,
  // loggedReducer
});

export default rootReducers;

4. exportしたrootReducerをsrc/index.jsでimportする。

src/index.js

import roorReducers from './reducers' // ファイル名の指定がない場合、webpackがindex.jsを自動的に指定してくれる

// ReduxのcreateStore()の引数にrootReducersを渡す。
const store = createStore(
  rootReducers
);

完了！

参考

▷Redux For Beginners | React Redux Tutorial - YouTube
▷ちょっと高度なJavaScriptの話 - Qiita