从组件访问 this.props.dispatch 和其他动作创建者

Question

我想同时使用 this.props.dispatch 和我自己定义的动作创建者来调度我的反应视图组件中的动作。

但是，如果我将 mapDispatchToProps 传递给 connect()，我将无法访问 this.props.dispatch。所以，这是我想出的解决方法：

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        updateRackGroup,
        cloneRackGroup,
        onSelectRack,
        onCloneRack,
        valRackChange,
        valRackAdd,
        onRackAction,
        valRackUpdate,
        dispatch
    }, dispatch);
}

function mapStateToProps({
    tempRackStates,
    rackGrpsAdded,
    invalidFields
}) {
    return {
        tempRackStates,
        rackGrpsAdded,
        invalidFields
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(RackgroupGenerator);

我对它不满意，因为“它在调度中包装了调度”。

那么在这种情况下，有没有一种优雅的方式来访问原始调度方法？

Answer 1

你不需要传递dispatch 做bindActionCreators。只需将其合并到绑定的动作创建者中

function mapDispatchToProps(dispatch) {
    const actionCreators = bindActionCreators({
        actionCreator1,
        actionCreator2,
    }, dispatch);
    return { ...actionCreators, dispatch };
}

// or without the additional assignment
return {
    dispatch,
    ...bindActionCreators({ actionCreator1, actionCreator2 }, dispatch)
};

顺便说一句，我并没有确定测试它，但我也认为你不应该“用调度包装调度”，因为我相信它会导致奇怪的行为，例如不情愿地多次调度动作。