stateが多くなるとreducerのファイルが巨大化してきます。ファイルを分けた方が編集も楽になるし、コード全体の見通しもよくなると思います。
分割方法は簡単で、index.jsファイルを作り、各状態のファイルを読み込み、configureStore.jsでそのindex.jsを読み込みます。
ディレクトリツリー
|
1 2 3 4 5 6 7 8 9 10 11 12 |
app ├── Root.js ├── actions │ └── user.js ├── components ├── configureStore.js ├── containers │ └── App.js └── reducers ├── index.js # configureStore.jsで読み込む └── user.js # index.jsで読み込む |
configureStore.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
|
1 2 3 4 5 6 7 |
import { combineReducers } from 'redux' import user from './user' export default combineReducers({ user }) |
user.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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ファイルを編集しなくて良くなる:)