redux 如何实现 pinia 的 $onAction 监听 dispatch 的触发? 拿到状态差集

[edk24]

我有一个场景是一次性加载大量的🚗在地图上打点;

然后通过 ws 更新"移动"的车, 从而更新地图上的点位.

ws 拿到数据并更新 redux 指定数组元素的数据已经完成了;

但是问题就是我如何在 react hooks 组件中监听差集数据呢?

--

vue pinia 的话我是这样做的

carStore.$onAction(({name, args}) => {
	// 业务逻辑...
})

[chnwillliu]

useSelector

[edk24]

@chnwillliu useSelector 如何得到差集呢, 主要是要差集

然后在地图上差异的更新点位, 而不是全部删了 又全部重新打点

statue: {
car:[]
}

拿到 car 变化的数据, 例如原本是 [1,2,3,4,5], 更新了 2 条 [1,4,3,4,6], 我要拿到 [4,6]

[webszy]

参考 vue 的 dom diff 算法

[iapplebear]

把每次变化后的数据计算好存到 car ，car 里面有就 filter 掉，没有就 concat 。useEffect(() => { doSomething(car) }, [car])
React 的依赖更新只会处理差异数据并不是批量替换的

[daolanfler]

再加两个状态呗，newCars[], removeCards: [] dispatch 更新的时候把这两个状态一起更新了。如果你的地图组件是独立于 react 的，在 useEffect 里面可以增量更新移除。
如果地图组件也是 react 的话，那更新 cars 就行，不用设置多的状态，直接交给 React 去渲染得了。

[edk24]

@daolanfler 我现在就是这样做的了, dispatch 更新时, 一边维护原有的数据, 一边记录本次的 car

然后在组件中使用 useSelector + useEffect 来 watch 车辆的更新