我目前正在尝试概念化如何根据另一个组件中的调度后的数据更改来处理在组件中调度动作。
看这个场景:
dispatch(someAjax)
-> 状态更新中的属性。
在此之后,我需要另一个依赖于这个相同属性的组件来知道它已经更新并基于新值调度一个动作。
与使用某种类型的value.on(change...
解决方案相比,处理此类“级联”操作的首选方法是什么?
我目前正在尝试概念化如何根据另一个组件中的调度后的数据更改来处理在组件中调度动作。
看这个场景:
dispatch(someAjax)
-> 状态更新中的属性。
在此之后,我需要另一个依赖于这个相同属性的组件来知道它已经更新并基于新值调度一个动作。
与使用某种类型的value.on(change...
解决方案相比,处理此类“级联”操作的首选方法是什么?
你可以使用 ReduxmapStateToProps
和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);
有两种基本方法:要么使用在操作完成后区分状态的中间件,要么使用 Redux 的低级store.subscribe
API。
Redux FAQ 有一个涵盖这个的答案。此外,我保留了一份 Redux 相关插件和实用程序的分类列表,其中包括一组现有的存储更改订阅库,这些库实现了各种方法来侦听数据更改。