如何在Redux上正确实现mapDispatchToProps？

Question

我已经看到了两种实现mapDispatchToProps的方法

第一种方式：

function mapDispatchToProps(dispatch) {
  return { actionMapped: bindActionCreators(courseActions, dispatch) };
}

第二种方式：

function mapDispatchToProps(dispatch) {
  return { actionMapped: () => dispatch( courseActions() )};
}

哪一个更有效？ 有什么情况我应该使用特定的吗？ 其中之一是“推荐的”吗？

Answer 1

连接Redux组件时，有几种有效的方法可以“绑定”动作创建者。 以下是一些示例：

    import {action1, action2} from "myActions";
    import {bindActionCreators} from "redux";

    const mapDispatchToProps(dispatch) => {
        return {
            manuallyBoundAction : (...args) => dispatch(action1(...args)),
            autoBoundAction : bindActionCreators(action2, dispatch),
            multipleActionsTogether : bindActionCreators({action1, action2}, dispatch)
        }
    };

    const MyComponent = (props) => {
        return (
            <div>
                <button onClick={props.manuallyBoundAction}>Run First Action</button>
                <button onClick={props.autoBoundAction}>Run Second Action</button>
                <button onClick={props.multipleActionsTogether.action1}>Run Third Action</button>
                <button onClick={props.multipleActionsTogether.action2}>Run Fourth Action</button>
            </div>
        )
    }

    export default connect(null, mapDispatchToProps)(MyComponent);

    // or, you can use the "object shorthand" for mapDispatch:
    export default connect(null, {action1, action2})(SomeOtherComponent)

所有这些最终都导致包装了动作创建者的函数，并在调用时自动将其返回值传递给dispatch() 。

我个人建议使用“对象简写”方法。 对我而言，从来没有充分的理由手动编写实际的mapDispatch函数。

Answer 2

如果courseActions是操作的对象，则将action对象作为mapDispatchToProps参数传递给connect方法会更容易：

如果传递了一个对象，则假定其中的每个函数都是Redux操作创建者。 一个具有相同功能名称的对象，但每个动作创建者都包装在一个调度调用中，以便可以直接调用它们，这些对象将合并到组件的props中。

例：

connect(mapStateToProps, courseActions)

bindActionCreators做相同的事情，但是您需要显式传递dipsatch ：

const mapDispatchToProps =(dispatch) => 
    bindActionCreators(courseActions, dispatch)