react 优化(用于自己记录)

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