redux-thunk - не отправляется, хотя я использовал mapDispatchToProps - PullRequest
Новая
       17

redux-thunk - не отправляется, хотя я использовал mapDispatchToProps

0 голосов
/ 01 октября 2019

У меня странная проблема с моим избыточным действием.

У меня есть две функции A (), B () внутри одного компонента, которые вызывают функцию действия ac (), которая использует thunk для выполнения асинхронного вызова. на сервер.

Я использовал mapDispatchToprops для сопоставления ac () с компонентом.

Когда я вызываю A (), он работает как шарм, действие отправляется и состояние обновляется. Но если я вызываю B (), который вызывает тот же ac () таким же образом, действие не отправляется. Это как если бы я вызывал обычную функцию, поэтому внутренняя структура не выполняется.

Я что-то здесь упускаю?

EDIT: 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
    );
  };

1 Ответ

0 голосов
/ 03 октября 2019

Я разобрался в проблеме. Это один из классических примеров, чтобы избежать повсеместного использования деструктуризации объектов.

В моем случае, в моем родительском компоненте 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 взято из оператора импорта, а в component_2 оно взято из подпорки.

Я видел много людей, предупреждающих о чрезмерном использовании деструктуризациитеперь я вижу, как это может вызвать такие тонкие ошибки.

...