redux-thunk - 即使我使用了 mapDispatchToProps 也没有调度答案

【问题标题】：redux-thunk - not dispatching even though I used mapDispatchToPropsredux-thunk - 即使我使用了 mapDispatchToProps 也没有调度
【发布时间】：2020-01-30 07:46:02
【问题描述】：

我的 redux 操作有一个奇怪的问题。

我在同一个组件中有两个函数 A()、B()，它们调用一个动作函数 ac()，该函数使用 thunk 对服务器进行异步调用。

我使用 mapDispatchToprops 将 ac() 映射到组件。

当我调用 A() 时，它就像一个魅力，动作被调度并更新状态。但是，如果我调用 B()，它会以相同的方式调用相同的 ac()，则不会调度该操作。就好像我在调用一个普通函数，所以里面的 thunk 没有被执行。

我错过了什么吗？

编辑：generateAgreement() 有效，但 signAgreement() 无效，即使它们调用相同的操作 updateAgreements()

generateAgreement = async evt => {
    evt.preventDefault();

    const selectedAgreement = this.props.myAgreements[evt.target.id];

    this.props.updateAgreements(
      Object.assign(
        {},
        {
          myAgreements: this.props.myAgreements,
          selectedAgreement
        }
      ),
      this.props.user.token,
      "generate-agreement",
      {
        agreementId: selectedAgreement.id
      },
      actionTypes.GENERATE_AGREEMENT
    );
  };

  signAgreement = async evt => {
    evt.preventDefault();

    const selectedAgreement = this.props.myAgreements[evt.target.id];

    this.props.updateAgreements(
      Object.assign(
        {},
        {
          myAgreements: this.props.myAgreements,
          selectedAgreement
        }
      ),
      this.props.user.token,
      "sign-agreement",
      {
        agreementId: selectedAgreement.id
      },
      actionTypes.SIGN_AGREEMENT
    );
  };

【问题讨论】：

邮政编码，A和B的叫法一定有区别
@RayWiis 发布了代码。谢谢！
如果this 没有绑定到其他东西似乎没问题，但是当您调用操作时只会给您一个错误。这可能有一些东西，不确定......
添加了一些控制台语句第一个函数的动作打印ƒ () { return dispatch(actionCreator.apply(this, arguments)); }第二个函数的动作打印({ myAgreements }, token, api_url, reqBody, action_type) => async dispatch => { console.debug("executing update"); try { const result = await axios__WEBPACK_IMPORTED_MODULE_1___default.a.p…不知道为什么另一个函数的动作变成了普通函数

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

我发现了问题所在。这是避免到处使用对象解构的经典示例之一。

就我而言，在我的父组件 1 中，我从 actions.js 文件导入如下：

Component_1.js

import { updateAgreements } from "../redux/actions.js"

...

render() {
    return <Child 
        updateAgreements={updateAgreements}
    />
}

const mapDispatchToProps = {
   updateAgreements
}
...

在父组件 2 中，我有以下代码，这就是 generateAgreement 按预期工作的原因：

Component_2.js

import { updateAgreements } from "../redux/actions.js"

...

render() {\
    const { updateAgreements } = this.props;
    return <Child 
        updateAgreements={updateAgreements}
    />
}

const mapDispatchToProps = {
   updateAgreements
}
...

请注意，在 component_1 中 updateAgreements 取自 import 语句，而在 component_2 中则取自 props。

我看到很多人警告过度使用解构，现在我知道它如何导致像这样的微妙错误。

【讨论】：