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

IT技术 reactjs redux redux-thunk
2021-04-28 07:13:43

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

看这个场景:

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

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

与使用某种类型的value.on(change...解决方案相比,处理此类“级联”操作的首选方法是什么?

2个回答

你可以使用 ReduxmapStateToPropsconnectReact 的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.subscribeAPI。

Redux FAQ 有一个涵盖这个的答案此外,我保留了一份 Redux 相关插件和实用程序的分类列表,其中包括一组现有的存储更改订阅库,这些实现了各种方法来侦听数据更改。