调度动作后如何监听Redux存储中的特定属性更改


76

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

采取这种情况:

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

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

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

Answers:


62

有两种基本方法:一种是在操作完成后改变状态的中间件,或者是使用Redux的低级store.subscribeAPI。

Redux常见问题解答对此有一个答案。另外,我保留了与Redux相关的插件和实用程序的分类列表,其中包括一组现有的商店更改订阅库,这些实现了用于侦听数据更改的各种方法。


1
感谢您的清单,这确实很有帮助。我实际上试图找出的最好方法是通知多个组件一些数据是从AJAX调用返回的,并且X键已更改。这些组件中的每一个都可能触发自己的动作。我可以了解中间件的更改,但是我要弄清楚的部分是在检测到更改时该怎么做。我觉得需要某种事件总线,但是Redux感觉不对。有什么建议吗?
爵士乐

1
在React和Redux中推荐的主要通信方式是父母将道具传递给孩子,孩子运行回调以通知父母。但是,诸如事件总线之类的其他方法肯定也有其用途,如果事件总线适合您的用例,那就去使用它。您可能需要查看ctheu.com/2015/02/12/…andrewhfarmer.com/component-communication作为示例。
–markerikson

4
尽管您没有具体回答问题,但列表中的第一项确实适合我的情况。redux-watch是获得此功能的简单且富创意的方式。再次感谢您的清单,这很有帮助。
爵士乐

是的,我最近将FAQ页面分为每个类别单独的页面。刚刚更新了我的答案中的链接以进行匹配。谢谢!
markerikson

98

您可以使用ReduxmapStateToPropsconnect带有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);

2
适合提供的标签,然后
hellogoodnight

2
真好 另外,可能有错字吗?你的意思是nextProps.specificProperty !== this.props.specificProperty
python1981 '18年

1
@BrunoCarvalhal,如果您不使用react,那么根据您的JS框架,可能有比redux更好的选择;)
FabienChn

4
对它的较小更新,现在componentWillUpdate不应再与React 16一起使用。getDerivedStateFromProps现在是推荐的方法。
wootencl

4
取决于-可能是getDerivedStateFromProps您想要新的状态,还是可能要使用componentDidUpdate更多的功能。
强尼·拉斯伯恩
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.