V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
edk24
V2EX  ›  React

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

  •  
  •   edk24 ·
    edk24 · 48 天前 · 1190 次点击
    这是一个创建于 48 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    --

    vue pinia 的话我是这样做的

    carStore.$onAction(({name, args}) => {
    	// 业务逻辑...
    })
    
    6 条回复    2024-07-30 15:59:28 +08:00
    chnwillliu
        1
    chnwillliu  
       48 天前 via Android
    useSelector
    edk24
        2
    edk24  
    OP
       48 天前
    @chnwillliu useSelector 如何得到差集呢, 主要是要差集

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

    statue: {
    car:[]
    }

    拿到 car 变化的数据, 例如原本是 [1,2,3,4,5], 更新了 2 条 [1,4,3,4,6], 我要拿到 [4,6]
    webszy
        3
    webszy  
       48 天前
    参考 vue 的 dom diff 算法
    iapplebear
        4
    iapplebear  
       48 天前
    把每次变化后的数据计算好存到 car ,car 里面有就 filter 掉,没有就 concat 。useEffect(() => { doSomething(car) }, [car])
    React 的依赖更新只会处理差异数据并不是批量替换的
    daolanfler
        5
    daolanfler  
       48 天前
    再加两个状态呗,newCars[], removeCards: [] dispatch 更新的时候把这两个状态一起更新了。如果你的地图组件是独立于 react 的,在 useEffect 里面可以增量更新移除。
    如果地图组件也是 react 的话,那更新 cars 就行,不用设置多的状态,直接交给 React 去渲染得了。
    edk24
        6
    edk24  
    OP
       48 天前
    @daolanfler 我现在就是这样做的了, dispatch 更新时, 一边维护原有的数据, 一边记录本次的 car

    然后在组件中使用 useSelector + useEffect 来 watch 车辆的更新
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   960 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:45 · PVG 03:45 · LAX 12:45 · JFK 15:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.