Question

我的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
    );
  };

Answer 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中获取的。

我已经看到很多人警告过度使用解构，因为我知道它会引起像这样的细微错误。

redux-thunk-即使使用mapDispatchToProps也不会调度

1 个答案: