redux 如何实现 pinia 的 $onAction 监听 dispatch 的触发? 拿到状态差集
edk24 edk24 2024-07-30 11:28:57 +08:00 2145 次点击这是一个创建于 439 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有一个场景是一次性加载大量的在地图上打点;
然后通过 ws 更新"移动"的车, 从而更新地图上的点位.
ws 拿到数据并更新 redux 指定数组元素的数据已经完成了;
但是问题就是我如何在 react hooks 组件中监听差集数据呢?
--
vue pinia 的话我是这样做的
carStore.$onAction(({name, args}) => { // 业务逻辑... })  | 1 chnwillliu 2024-07-30 11:39:27 +08:00 via Android useSelector |
 | 2 edk24 OP @chnwillliu useSelector 如何得到差集呢, 主要是要差集 然后在地图上差异的更新点位, 而不是全部删了 又全部重新打点 statue: { car:[] } 拿到 car 变化的数据, 例如原本是 [1,2,3,4,5], 更新了 2 条 [1,4,3,4,6], 我要拿到 [4,6] |
 | 3 webszy 2024-07-30 13:40:25 +08:00 参考 vue 的 dom diff 算法 |
 | 4 2I0Mto2kjm0c0B9i 2024-07-30 13:56:20 +08:00 把每次变化后的数据计算好存到 car ，car 里面有就 filter 掉，没有就 concat 。useEffect(() => { doSomething(car) }, [car]) React 的依赖更新只会处理差异数据并不是批量替换的 |
 | 5 daolanfler 2024-07-30 15:19:08 +08:00 再加两个状态呗，newCars[], removeCards: [] dispatch 更新的时候把这两个状态一起更新了。如果你的地图组件是独立于 react 的，在 useEffect 里面可以增量更新移除。 如果地图组件也是 react 的话，那更新 cars 就行，不用设置多的状态，直接交给 React 去渲染得了。 |
| 6 edk24 OP @daolanfler 我现在就是这样做的了, dispatch 更新时, 一边维护原有的数据, 一边记录本次的 car 然后在组件中使用 useSelector + useEffect 来 watch 车辆的更新 |
Select Language