Redux - 如何组合多个 mapDispatchToProps？

Question

我正在开发一个 react-native / redux 应用程序，它包含一些我可以使用 combineReducers() 组合的 Reducer 文件。为了管理代码并保持其可维护性，这些文件还包含 mapDispatchToProps 条目（我这样做是因为调度函数与 Reducers 密切相关），例如：

export const counterMapDispatchToProps = dispatch => {
    return {
        increment: () => dispatch({ type: 'INCREMENT' }),
        decrement: () => dispatch({ type: 'DECREMENT' }),
    }
}

和

export const statusMapDispatchToProps = dispatch => {
    return {
        setStatus: (text) => dispatch({ type: 'SET_STATUS', status: text }),
    }
}

如果可能的话，我想获取这些 mapDispatchToProps 的输出并将它们组合起来，以便我得到一个生成以下内容的函数，然后可以在连接到我的 Redux 存储时使用它：

export const appMapDispatchToProps = dispatch => {
    return {
        increment: () => dispatch({ type: 'INCREMENT' }),
        decrement: () => dispatch({ type: 'DECREMENT' }),
        setStatus: (text) => dispatch({ type: 'SET_STATUS', status: text }),
    }
}

我想我的问题实际上归结为：如何编写 combineMapDispatchToProps({counterMapDispatchToProps, statusMapDispatchToProps, ...}) 函数？

Answer 1

由于这些函数只返回一个对象（然后由消费者 HOC 处理），因此您可以使用 ES6 传播 -

export const appMapDispatchToProps = dispatch => {
    return {
        ...counterMapDispatchToProps(dispatch),
        ...statusMapDispatchToProps(dispatch),
    }
}

您可以为此添加更多功能，当然也可以从其他文件中导入它们。

---

如果你需要 ES5，你可以使用 Object.assign 来达到类似的效果：

export const appMapDispatchToProps = function(dispatch) {
    return Object.assign(counterMapDispatchToProps(dispatch), statusMapDispatchToProps(dispatch));
}