Redux应用二：多个reducer合成一个根reducer

多个reducer应用，配合redux-thunk

• 一个页面或一个组件都有单独的reducer
• 通过combineReducers将多个reducer和成一个reducer
• 组件的store，index为出入口文件

// src/store/index.js
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
export default store;

// src/store/reducer.js
import { combineReducers } from 'redux';
import { reducer as homeReducer } from './../pages/home/store';
import { reducer as loginReducer } from './../pages/login/store';

const reducer = combineReducers({
  home: homeReducer,
  login: loginReducer,
});
export default reducer;

• reducer1，此处以home组件的reducer为例

// pages/home/store/index.js
import reducer from './reducer'
import * as actionTypes from './actionTypes'
import * as actionCreators from './actionCreators'

export {
  reducer,
  actionTypes,
  actionCreators
}

// pages/home/store/reducer.js
const defaultState = {
  name: 'home'
}

const reducer = (state = defaultState, action) => {
  if (action.type === 'HOME_TYPE') {
    return state
  }
  return state
}
export default reducer

// pages/home/store/actionTypes.js
export const NAME = 'HOME'

// pages/home/store/actionCreators.js
import { actionTypes } from './index'
export const setName = () => ({
  type: actionTypes.NAME
})

多个reducer,使用immutable

• 如果对于组件的数据使用Immutable.js 对象来管理
• 根reducer可以使用redux-immutable 更加合理化的使用
• 参考文档
• 安装npm install immutable
• 安装npm install redux-immutable
• 将组件的数组格式改成immutable

// pages/home/store/reducer.js
import { fromJS } from 'immutable'
const defaultState =fromJS({
  name: 'home'
})

const reducer = (state = defaultState, action) => {
  if (action.type === 'HOME_TYPE') {
    return state
  }
  return state
}
export default reducer

• 根reducer使用redux-immutable提供的combineReducer进行生成

// src/store/reducer.js
// import { combineReducers } from 'redux';
import { combineReducers } from 'redux-immutable'
import { reducer as homeReducer } from './../pages/home/store';
import { reducer as loginReducer } from './../pages/login/store';

const reducer = combineReducers({
  home: homeReducer,
  login: loginReducer,
});
export default reducer;

• immutable获取数据

• immutable修改数据，也就是组件的reducer里修改，通过immutable的get和set进行获取和修改

当使用immutable之后，推荐组件继承PureComponent

参考文档

• 如果你使用 immutable 进行数据管理,可以将组件的继承 Component 都改成 PureComponent 可以很好的提升性能.如果没有使用 immutable,建议还是使用 component,因为这个有时候会遇到小坑,如果没有使用 immutable 进行数据管理,你也可以自己写 shouldComponentUpdate 进行性能的优化

• PureComponent 内置了类似组件 shouldComponentUpdate 钩子，对于与自己组件无关的数据改变，不会重新渲染，大大提高了性能.