6.使用combineReducers完成对数据的拆分管理19-

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第7次提交
1.使用redux工具
到GitHub搜索redux-devtools-extension的1.2 Advanced store setup复制代码到项目中
在store的index.js中
import { createStore, compose } from 'redux';

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

2.在header下建立一个store文件夹，并创建index和reducer两个文件
3.将之前store中的reducer.js的代码剪切到刚创建的reducer中
并在刚创建的index中加入代码

import reducer from './reducer' ;
export  { reducer }

4.在最外层store下的reducer里引入combineReducers,并引入header的reducer

import { combineReducers } from 'redux';
//redux提供的combineReducers可以把小的reducer合并起来
import {reducer as headerReducer} from '../commen/header/store';
//as是ES6的一个语法 这里是给reducer起一个别名headerReducer

const reducer = combineReducers({
  header: headerReducer
//header是为这个reducer命的名称可以随意改写
});
export default reducer;

5.改写header的index.js中的代码

const mapStateToProps = (state) => {
  return {
    focused: state.header.focused//将store中的focused映射到props
  }
}