Redux技术问题：如何合并多个mapDispatchToProps函数？

这其实很容易实现，我们可以参考Redux combineReducers 的思路，写一个工具函数来合并多个mapDispatchToProps函数的输出。

核心实现 #

首先，编写combineMapDispatchToProps函数：

export function combineMapDispatchToProps(mapDispatchFunctions) {
  return (dispatch) => {
    // 遍历所有传入的mapDispatch函数，调用后合并返回的props对象
    return Object.values(mapDispatchFunctions).reduce((combinedProps, mapDispatch) => {
      const currentProps = mapDispatch(dispatch);
      return { ...combinedProps, ...currentProps };
    }, {});
  };
}

如何使用 #

假设你已经有了counterMapDispatchToProps和statusMapDispatchToProps，只需要这样调用：

import { counterMapDispatchToProps, statusMapDispatchToProps } from './path-to-your-reducers';
import { combineMapDispatchToProps } from './path-to-this-utility';

// 合并后的全局mapDispatchToProps
export const appMapDispatchToProps = combineMapDispatchToProps({
  counterMapDispatchToProps,
  statusMapDispatchToProps
});

工作原理 #

1. 这个工具函数接收一个对象，对象的每个属性都是你定义的mapDispatchToProps函数
2. 它返回一个新的函数，当这个函数被传入dispatch时，会遍历所有传入的mapDispatch函数
3. 依次调用每个mapDispatch函数并传入dispatch，得到各自的props集合
4. 通过扩展运算符(...)把所有props对象合并成一个完整的对象返回

注意事项 #

• 如果不同的mapDispatchToProps里定义了同名的方法，后面的函数返回的方法会覆盖前面的，所以要确保你的action方法名在全局是唯一的，或者提前处理命名冲突问题。

内容的提问来源于stack exchange，提问作者Michael O'Connor