3.使用combineReducers对数据的拆分管理

使用Chrom Redux-Devtools插件

在store/index.js中

import { createStore, compose } from 'redux'
import reducer from './reducer'
// 创建一个composeEnhancers
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
// 使用Redux-Devtools插件
const store  = createStore(reducer, composeEnhancers()) 

export default store;

这样就能在谷歌浏览器中使用 Redux-Devtools插件了，截图如下：

使用combineReducers对数据的拆分管理

如果将所有的数据都放在store/reducer中来管理的话，那么这个文件会原来越大，我们可以一个大的reducer拆分为一个个小的reducer，然后使用combineReducers来进行整合。

新建header/store/reducer.js

// 专为header建立一个reducer，用来存放和header的数据信息
const defaultState = {};

export default (state = defaultState, action ) => {
	return state;
}

store/reducer.js

import { combineReducers } from 'redux'
import herderReaducer from '../common/header/store/reducer';

// 在此处将header中的reducer信息导入，并起一个名字叫做header
const reducer = combineReducers({
	header: herderReaducer
})

export default reducer;

优化

因为store/reducer.js中导入reducer比较长 “ import herderReaducer from ‘../common/header/store/reducer’; ”我们可以在header/store下创建一个index.js

// 里面导入自己的reducer，同时导出。因为是index.js,所以我们通过导入上级目录来减少路径太长的问题
import reducer from './reducer';

export { reducer }

store/reducer.js

import { combineReducers } from 'redux'
// 因为header/store/index.js下导入了reducer，所以我们只需导入/common/header/store即可
// reducer as herderReaducer 的意思是，导入reducer，从命名为herderReaducer
import { reducer as herderReaducer } from '../common/header/store';

// 在此处将header中的reducer信息导入，并起一个名字叫做header
const reducer = combineReducers({
	header: herderReaducer
})

export default reducer;

代码地址