如何在调度操作后监听 Redux 存储中的特定属性更改答案

【问题标题】：How to listen for specific property changes in Redux store after an action is dispatched如何在调度操作后监听 Redux 存储中的特定属性更改
【发布时间】：2016-08-02 02:39:22
【问题描述】：

我目前正在尝试概念化如何根据在另一个组件中调度后的数据更改来处理在一个组件中调度一个动作。

以这个场景为例：

dispatch(someAjax) -> 状态更新中的属性。

在此之后，我需要另一个依赖于这个相同属性的组件来知道它已经更新并根据新值调度一个动作。

除了使用某种类型的value.on(change... 解决方案之外，处理这种“级联”动作的首选方法是什么？

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

您可以将 Redux 的 mapStateToProps 和 connect 与 React 的 componentDidUpdate(prevProps, prevState, snapshot) 挂钩。

所以基本上你的代码可能是这样的：

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);

【讨论】：

适合提供的标签，然后
不错。另外，可能的错字？你的意思是nextProps.specificProperty !== this.props.specificProperty？
对此的小更新，componentWillUpdate 不应再与 React 16 一起使用。getDerivedStateFromProps 现在是推荐的方法。
取决于 - 如果您想要新状态，可以是 getDerivedStateFromProps，但您可能想使用 componentDidUpdate 以获得更多功能。
这种方法对我也很有效。为了与功能组件一起使用，我将 componentDidUpdate 更改为 useEffect(() => { /* Do whatever you want */ }, [props.specificProperty]) 并将 mapStateToProps 定义为接口并设置为我的组件道具

【解决方案2】：

有两种基本方法：在操作完成后区分状态的中间件，或者使用 Redux 的低级 store.subscribe API。

Redux 常见问题解答有 an answer that covers this。此外，我保留了一份与 Redux 相关的插件和实用程序的分类列表，其中包括一组existing store change subscription libraries，它们实现了各种方法来监听数据变化。

【讨论】：

感谢这份清单，它真的很有帮助。我实际上想弄清楚的是通知几个组件一些数据从 AJAX 调用返回并且 X 键已更改的最佳方法。然后，这些组件中的每一个都可能触发自己的操作。我可以了解中间件的变化，但我想弄清楚的是当检测到变化时该怎么做。我觉得需要某种事件总线，但 Redux 感觉不对。有什么建议吗？
在 React 和 Redux 中主要推荐的通信方式是父母将 props 传递给孩子，孩子运行回调通知父母。然而，像事件总线这样的其他方法当然有它们的用途，如果事件总线适合您的用例，那就去吧。您可能想查看ctheu.com/2015/02/12/… 和andrewhfarmer.com/component-communication 的示例。
虽然您没有具体回答这个问题，但您列表中的第一项确实适用于我的情况。 redux-watch 是获得此功能的一种简单而有创意的方法。再次感谢您的列表，它很有帮助。
是的，我最近将常见问题解答页面拆分为每个类别的单独页面。刚刚更新了我的答案中的链接以匹配。谢谢！