使用Redux的combineReducers对数据拆分

随着项目建设，如果将所有变量和逻辑都写在reducer中，会导致reducer文件变得臃肿且逻辑复杂。所以需要对reducer进行拆分。使用"combineReducers"函数，对多个reducer进行整合。把多个小的reducer整合成一个大的reducer，并导出给store使用。

1、整合前所有reducer都在一起。reducer和state都只有一级。具体代码如下：

总reducer（路径src/store/reducer.js）

jsx 复制代码

const defaultState = {
  focused: false
}

export default (state = defaultState, action) => {
  const {type} = action;
  let newState = JSON.parse(JSON.stringify(state));

  switch(type) {
    case 'search-focus':
      newState.focused = true;
      break;
    case 'search-blur':
      newState.focused = false;
      break;
    default:
      return state;
  }

  return newState;
}

store（路径src/store/index.js）

jsx 复制代码

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

// 此处是使用Redux DevTools的写法
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

组件（src/pages/header/index.js）

jsx 复制代码

import React from 'react';
import { connect } from 'react-redux';

const Header = (props) => {
  const { focused } = props;
  return (
    // ...  此处代码省略
  )
}

const mapStateToProps = (state) => {
  return {
    focused: state.focused  // 这儿是重点，此处focused是在state下。
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      const action = {
        type: 'search-focus'
      }
      dispatch(action);
    },
    handleBlur () {
      const action = {
        type: 'search-blur'
      }
      dispatch(action);
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

2、把reducer拆分后

为每个模块分配一个reducer（在对应组件文件夹下新建store文件夹，然后再该文件夹下再新建文件reducer.js），然后在总reducer.js文件中使用combineReducers再整合到一起。并导出给store使用。拆分后组件中对应的state会多一个层级。如：state.header.focused

组件中的reducer，和原来的reducer写法一样。（路径 src/pages/header/store/reducer.js）

jsx 复制代码

const defaultState = {
  focused: false
}

export default (state = defaultState, action) => {
  const {type} = action;
  let newState = JSON.parse(JSON.stringify(state));

  switch(type) {
    case 'search-focus':
      newState.focused = true;
      break;
    case 'search-blur':
      newState.focused = false;
      break;
    default:
      return state;
  }

  return newState;
}

原reducer文件使用combineReducers方法整合子reducer（路径src/store/reducer.js）

jsx 复制代码

import { combineReducers } from 'redux';
import headerReducer from '../pages/header/store/reducer'; // 引用组件中的子reducer

// 使用combineReducers方法整合多个子reducer
const reducer = combineReducers({
  header: headerReducer
})

export default reducer;

store（路径src/store/index.js）不需要修改

jsx 复制代码

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

// 此处是使用Redux DevTools的写法
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

组件中state的层次有所变化（多了一层）

jsx 复制代码

import React from 'react';
import { connect } from 'react-redux';

const Header = (props) => {
  const { focused } = props;
  return (
    // ...  此处代码省略
  )
}

const mapStateToProps = (state) => {
  return {
    focused: state.header.focused // 此处state下多一级header，对应的是combineReducers中定义的key值
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      const action = {
        type: 'search-focus'
      }
      dispatch(action);
    },
    handleBlur () {
      const action = {
        type: 'search-blur'
      }
      dispatch(action);
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);