使用combineReducers 完成对数据的拆分管理

前面，我们将focused 属性放置在redux 中了。但是现在在浏览器中调试窗口看redux 的信息，还看不到，我们还需要做一些设置。

我们可以在github 上搜索redux-devtools-extension 如下

这个就是我们要的插件（它不需要安装）。

github 的文档，往下翻，会找到它的使用方法，如下，是一部分。

按照官网的写法，我们去src/store 下，找到 index.js，做下面的修改。

import { createStore, compose } from 'redux';
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers());

export default store;

这样，调试窗口的 Redux 窗口就可以正常debug 了。

好啦。我们目前所有的redux 的数据 和 关于数据的操作，都放在了 reducer.js 中，当项目很大时，reducer 就会变得很难维护了。下面，我们要把reducer.js 中的功能进行拆分。

Redux 给我们提供了一个方法：combineReducers 。它可以把一个大的reducer 拆成很多小的reducer 来进行管理。

那具体的操作呢，我们可以在一个组件里面建立一个这个组件关系的 reducer。

我们在 src/comment/header 下，创建一个目录 store，再往这个store 目录下，创建一个文件 reducer.js。

由于 focused 属性，是Header 组件关心的，其它组件不关心。我们把原来 src/store/reducer.js 中的代码剪切过来。src/comment/header/store 下的 reducer.js 代码如下。

const defaultState = {
    focused: false
};

export default (state = defaultState, action) => {
    if (action.type === "search_focus") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = true;
        return newState;
    }
    if (action.type === "search_blur") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = false;
        return newState;
    }
    return state;
}

然后呢，src/store 下的reducer ，要去整合所有的小 reducer。src/store 下的reducer 代码如下。

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

export default combineReducers({
    header: headerReducer
});

现在，貌似是可以得了。但是在页面测试，会发现，原来焦点事件，样式都没有了。这是因为，我们通过combineReducers 方法将reducer 拆分后，新的store　变成了这样：

所以，我们在Header　组件中接受state　参数的时候，要改成下面这样。

const mapStateToProps = (state) => {
  return {
    focused: state.header.focused
  }
}

最后，我们会发现在 src/store 下的reducer 中，小reducer 的地址非常长。那么，我们可以这样做。在src/common/header/store目录下，创建一个文件index.js ，代码如下。

import reducer from './reducer';

export { reducer };

然后  src/store 下的reducer 就可以改成如下。

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

const reducer = combineReducers({
    header: headerReducer
});

export default reducer;

Done.