使用RxJS 解决React 跨组件state通信

react

先看一个简单的需求如下图所示:

左侧点按钮 右侧对应的车辆 展开收起状态进行变更,点右侧 同样 可以展开与收起。注意只有一个可打开的状态,其它组件要关闭,这个状态存在每个车辆组件中,那么如何点左侧的按钮来改变右侧相应车辆状态呢?当然有redux,但组件自身的状态我就不想放到redux state 中,看RxJS 如何实现(ps:有点洁癖的要求)

组件划分

利用RxJS的Subject 对象可以进行多播的特性, 将多个react 组件对同一个Suject 实例进行订阅,当新值到达时,进行处理,比如上述需求,所有车辆组件订阅一个Subject实例 这个实例发送当前点击的车辆id,所有车辆组件收到当前id时和自身id对比如是自己对state 进行toggle 如果不是,直接状态置关闭。

所以利用Suject 多播特性state可以穿透整层层组件进行通信。

利用这个特性可能取代redux 吗?显然是不能,这两个还是巨大差异的。

redux 不只是state共享,只是一个Suject 还是太过简陋,需要再次封装,比如,也使用action 每次新值通过action 然后经reducer处理,当然只是简单的使用也没必要搞的太复杂。

Suject 文档及demo

案例demo  [email protected]:yyccmmkk/wms-map-react.git

以上是 使用RxJS 解决React 跨组件state通信 的全部内容, 来源链接: utcz.com/z/383617.html

回到顶部