使用 Redux thunk 反应 Redux connect()答案

【问题标题】：React Redux connect() with Redux thunk使用 Redux thunk 反应 Redux connect()
【发布时间】：2016-06-12 13:53:50
【问题描述】：

我在使用 Redux thunk 和 react-redux 中的 connect() 方法时遇到问题。我有以下代码：

function Component(props) {
    return (
        <button onClick={props.callback}>Click here</button>
    );
}

function actionCreator() {
    console.log('#1');
    return dispatch => console.log('#2'); // = thunk
}

const mapDispatchToProps = dispatch => ({
    callback: actionCreator
});
export const Container = connect(null, mapDispatchToProps)(Component);

当我渲染Container 组件并单击按钮时，控制台中仅显示“#1”。所以'thunk'不会被执行。

当我明确派发 actionCreator() 时，它确实有效：

const mapDispatchToProps = dispatch => ({
    callback: dispatch => dispatch(actionCreator())
});

The Redux docs says this about mapDispatchToProps:

如果传递了一个对象，它里面的每个函数都将被假定为 Redux 动作创建者

那么为什么 mapDispatchToProps 不是 dispatch() 我的 actionCreator()？我是 React 新手，所以也许我不明白吗？

更新

当使用 redux 中的 bindActionCreators() 时，它确实有效：

const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        callback: actionCreator
    }, dispatch);
};

这是将 actioncreators 与 connect() 绑定的正确方法吗？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

在您的mapDispatchToProps 中，您通过将dispatch 设为函数的参数来覆盖它。因为你正在执行dispatch => {function}，所以函数内部的调度现在引用你传递给函数的参数——但你没有传递任何参数给它。

callback: dispatch => dispatch(actionCreator())
           // ^ overrides ^

把它改成这个，它应该可以工作了：

const mapDispatchToProps = dispatch => ({
    callback: () => dispatch(actionCreator())
});

这样，当您调用callback() 时，dispatch 引用mapDispatchToProps 传递的dispatch 函数，并且操作被调度。

【讨论】：

感谢您的回答。我已将 redux-thunk 作为中间件包含在我的商店中。你的代码不起作用。它在组件挂载时直接调度 actionCreator。当我然后单击按钮时，我收到错误“this.props.callback is not a function”
你说得对，我现在发现了真正的问题。将mapDispatchToProps 函数更改为const mapDispatchToProps = dispatch => ({ callback: () => dispatch(actionCreator()) });，它应该可以工作。我在上面编辑了我的答案以反映这一点并解释为什么需要这样做！
再次感谢。问题是callback: dispatch => dispatch(actionCreator()) 确实有效。但是随后传递给callback()（来自组件）的参数将不会传递给actionCreator()。我发现 bindActionCreators() 现在可以使用。

【解决方案2】：

这是因为您的 actionCreator 函数在被调用时会返回一个新函数。删除actionCreator 中的return 即可。

【讨论】：

感谢您的回答。它不起作用。返回函数不是定义thunk的方式吗？
@Jan-PaulKleemans 你能提供一个 jsfiddle 吗？所以我可以帮你。
我发现 bindActionCreators() 现在可以工作了。感谢您的帮助。