从 redux 状态更改后如何以及何时调用反应组件方法

Question

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

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

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.

但这是应该如何做，还是没有将足够的逻辑转移到动作创建者的症状？

Answer 1

更详细的示例会很有用，但根据您在此处提供的内容，我想我明白了您的意思。

简短回答：是的，这是没有将足够的逻辑移动到动作创建者的症状。理想情况下，您的组件应该是一个纯视图组件。在大多数情况下不需要 componentWillReceiveProps - 你只需渲染任何道具，仅此而已。这就是为什么 Abramov（redux 的创建者）主张功能组件。更多关于 here.

如果您需要在对某些数据进行异步调用 returns 后执行其他操作，您可以在操作创建器中执行此操作，如您所说。我将使用一个使用 thunk 的示例：

编辑： 我添加了一个组件示例，该组件将对音频播放器的引用作为参数传递给操作。这样，操作就可以在异步步骤之后进行操作。

//An async action creator that uses the thunk pattern.
//You could call this method from your component just like any other
//action creator.

export function getMaDatums(audioPlayer, audioContext) {
  return function (dispatch) {

    //make the actual call to get the data
    return fetch(`http://<your stuff here>`)
      .then(data => {

        //call dispatch again to do stuff with the data
        dispatch(gotDataAction(data));

        //call dispatch some more to take further actions
        dispatch(...);

        //since the component passed us references to these, we can
        //interact with them here, after our data has loaded! FTW!
        audioPlayer.doTheThings();
        audioSession.doTheOtherThings();

        //plus anything else you want...
      });
  }
}

如果您想了解有关使用 redux 执行异步操作的更多信息，或者就此而言，从您的 redux 应用程序与有状态库进行交互，我强烈建议您仔细阅读 redux 文档。上面 thunk 示例的基础来自 here.

祝你好运，玩得开心 React + Redux！

Answer 2

更新可能是由道具或状态的变化引起的。当重新渲染组件时，这些方法将按以下顺序调用：

静态 getDerivedStateFromProps()
shouldComponentUpdate()
渲染()
getSnapshotBeforeUpdate()
componentDidUpdate() 尝试使用 componentDidUpdate()

反应文档https://reactjs.org/docs/react-component.html#updating

Answer 3

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

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

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

从 redux 状态更改后如何以及何时调用反应组件方法

how and when to call a react component methods after state change from redux

reactjs

redux

react-redux

redux-thunk