javascript - Redux action 和 async/await 函数在类组件和函数中具有不同的行为

Question

我一直在开发具有以下依赖项的 Next.js 应用程序:

"react": "^16.9.0",
"react-redux": "^5.0.7",
"redux": "^4.0.4",

我创建 stepsNameThatMustBeShown 的 redux 操作之一(redux 状态的属性)是:

export const setInitialSteps = () => {
     //.....
     // some codes that creates the stepsNameThatMustBeShown array
     //....
    return {
        type: ActionTypes.SET_QUICK_RESUME_GENERATOR_MODAL_INITIAL_STEPS,
        data: stepsNameThatMustBeShown
    }
};

我在我的应用程序的两个不同地方使用了这个片段，一个类组件和一个函数式组件。

<button onClick = {
    async () => {
      await this.props.setInitialSteps();
      if (this.props.stepsNameThatMustBeShown.length > 1) {
        this.props.setCurrentStep(this.props.stepsNameThatMustBeShown[0]);                                                               
        this.props.setQuickResumeDisplayStatus(true);                                                                    
        this.props.setUnUpdatedStepsName([...this.props.stepsNameThatMustBeShown]);
      }
    }}>
      Open
</button>
//....
//...


 const mapStateToProps = (state) => {
    return {
        stepsNameThatMustBeShown: state.quickResumeGeneratorModal.stepsNameThatMustBeShown,
    };
};


function mapDispatchToProps(dispatch) {
   return {
            setQuickResumeDisplayStatus: bindActionCreators(setQuickResumeDisplayStatus, dispatch),
            setInitialSteps: bindActionCreators(setInitialSteps, dispatch),
            setCurrentStep: bindActionCreators(setCurrentStep, dispatch),
            setUnUpdatedStepsName: bindActionCreators(setUnUpdatedStepsName, dispatch),
        }
    }

export default connect(mapStateToProps, mapDispatchToProps)(resultTest);

显然，我没有使用 this.props在一个功能组件中。代码片段中的所有这些函数都是 redux 操作。在代码片段中，我更新了 redux 状态的属性，并在更新后立即使用它。
在类组件中，async 和 await 关键字按我们的预期工作，但在功能组件中，await 关键字不能正常工作。我阅读了该社区中存在的一些相关问题，但没有一个无法帮助我解决问题。

Answer 1

您需要使用 react-redux 7.1 或更高版本才能使用 const dispatch = useDispatch()在您的功能组件中，然后调用 dispatch()在您的 onClick 处理程序中。
在您的功能组件中使用:

const dispatch = useDispatch()

然后您的处理程序将如下所示:

<button onClick = {
    async () => {
      const action = this.props.setInitialSteps(); // <======
      dispatch(action); // <=====
      if (this.props.stepsNameThatMustBeShown.length > 1) {
        this.props.setCurrentStep(this.props.stepsNameThatMustBeShown[0]);                                                               
        this.props.setQuickResumeDisplayStatus(true);                                                                    
        this.props.setUnUpdatedStepsName([...this.props.stepsNameThatMustBeShown]);
      }
    }}>
      Open
</button>

再次所有 async在您的用例中不需要您拥有的东西。