reactjs - 从 redux 状态更改后如何以及何时调用 React 组件方法

Question

在单个 React 组件中，用户单击按钮 => 调用方法 => 触发操作 => 异步获取 => reducer 更新状态 => 组件接收新的 props。

回到触发我一直在使用的操作的原始组件:

componentWillReceiveProps(nextProps){
    if(nextProps.someProp !== this.props.someProp){
        //ok new prop is here
        this.someMethod(nextProps.someProp);
    }
}

我是否以正确的方式处理这件事？

作为回调机制，它似乎有点笨拙并且与用户操作或状态更改分离。一旦有几个这样的组件，它只会让遵循组件的逻辑流程变得更加困难，我有一个包含其中 3 个组件的组件，并且已经认为推理起来并不容易，特别是当它们是相关流程 a > b > 的一部分时C 。我最终得到了这样的结果:

componentWillReceiveProps(nextProps){

    if(this.patchJavaScriptWillLoad(nextProps)){
        this.createPatchInstance();
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchInstanceWillBeReady(nextProps)){
        this.startPatchAudio(nextProps.webAudioPatch.instance);
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchParametersWillChange(nextProps)){
        this.updateWebAudioPatchParameters(nextProps.webAudioPatchParameters);
    }
}

// abstracted away if conditions to make componentWillReceiveProps more readable. 

但是这是应该如何完成的，还是这是没有将足够的逻辑传递给 Action 创建者的症状？

Answer 1

几年后回到我自己的问题。

如果我可以使用功能组件，我会使用react hook useEffect。如果逻辑可以外化，那么也许可以写成一个传奇。

useEffect(() => {
  methodToCallIfPropChanges()
}, [watchedProp]);