共计 1065 个字符，预计需要花费 3 分钟才能阅读完成。
reducer 拆分
在对应的组件的文件下创建 store 文件
把主 store 的 reducer.js 做变动
import {combineReducers} from’redux’;
import headerReducer from ‘../common/header/store/reducer’;
const reducer = combineReducers({
header:headerReducer
});
export default reducer;
组件对应获取 store 的变更
const mapStateToProps = (state) => {
return {
focuse:state.header.focuse,
list:state.header.list
}
};
组件 store 做一个公共的出口文件 index.js
// 组件下的 store 文件下的 index.js
import reducer from ‘./reducer’;
import * as actionCreators from ‘./actionCreators’;
import * as actionTypes from ‘./actionTypes’
export {reducer , actionCreators , actionTypes} ;
// 项目主 store 文件下的 reducer.js
import {combineReducers} from’redux’;
import {reducer as headerReducer} from ‘../common/header/store’;//as 取别名
const reducer = combineReducers({
header:headerReducer
});
export default reducer;
// 组件文件中做修改
import {actionCreators} from ‘./store’
const mapStateToProps = (state) => {
return {
focuse:state.header.focuse,
list:state.header.list
}
};
const mapDispatchToProps = (dispatch) => {
return {
changeFocuse () {
store.dispatch(actionCreators.changeFocuse())
},
changeBlue () {
store.dispatch(actionCreators.changeBlur())
}
}
}
reducer 不能直接修改 store 中的 state，解决办法引入 imutable.js