redux-thunk

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 中，它是从道具中获取的。

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

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

redux-thunk - not dispatching even though I used mapDispatchToProps

reactjs

redux

react-redux