Waza Lab

ReduxでReducerのファイルを分割する方法

Jul 2, 2016 | 1 minute read

stateが多くなるとreducerのファイルが巨大化してきます。ファイルを分けた方が編集も楽になるし、コード全体の見通しもよくなると思います。

分割方法は簡単で、index.jsファイルを作り、各状態のファイルを読み込み、configureStore.jsでそのindex.jsを読み込みます。

ディレクトリツリー

app
├── Root.js
├── actions
│   └── user.js
├── components
├── configureStore.js  
├── containers
│   └── App.js
└── reducers
    ├── index.js # configureStore.jsで読み込む
    └── user.js # index.jsで読み込む

configureStore.js

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducer from './reducers/index'  // indexを呼ぶ

const loggerMiddleware = createLogger()

const createStoreWithMiddleware = applyMiddleware(
  thunkMiddleware,
  loggerMiddleware,
)(createStore)

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState)　//いつも通りにstore作成
}

index.js

import { combineReducers } from 'redux'
import user from './user'

export default combineReducers({
  user
})

user.js

import { SIGNUP, LOGIN, LOGOUT, LOGIN_COMPLETED, SIGNUP_COMPLETED,
  SIGNUP_FAILED, LOGIN_FAILED } from '../actions/user';

export default function user(state = {
  isSigningUp: false,
  isLoggingIn: false,
  loggedIn: false,
  signUpFailed: false,
  loginFailed: false,
  tasks: [],
  projects: {},
  error: null,
},  action) {
  switch (action.type) {
    case SIGNUP:
      return Object.assign({}, state, {
        isSigningUp: true,
      });
.....

これで巨大reducerファイルを編集しなくて良くなる:)

Related Posts