如何基于@redux/toolkit使用useEffect与useSelector从Redux取数实现DApp领养人列表自动更新

先查这几个最容易踩的坑 #

• useSelector严格引用比对失效
  @redux/toolkit 搭配的useSelector默认通过严格相等（===）判断选中的状态是否变化，完全不关心状态内部的内容有没有更新。就算控制台能看到loadAdopters已经拿到了最新的领养人数据，如果在adoptionSlice的extraReducer分支写回状态时，没有给adopters字段生成全新的数组引用，组件根本不会触发重渲染。
  常见错误实现：

  // adoptionSlice.js 错误写法
  builder.addCase(loadAdopters.fulfilled, (state, action) => {
    // action.payload 是从合约拿到的最新数组，但如果该数组被Web3实例缓存了同一个引用，就会出现引用不变、内容变了的情况
    state.adopters = action.payload
  })
  

  修正方式：写回状态时强制生成新的数组引用，保证引用地址变化：

  // 修正后的实现
  builder.addCase(loadAdopters.fulfilled, (state, action) => {
    state.adopters = [...action.payload]
  })
  

• Web3本地缓存导致轮询拿到旧数据
  如果loadAdopters异步action内部加了块高拦截逻辑——比如判断当前读取到的链上块高和上次加载时记录的块高一致，就直接中断流程、不更新store，就会出现跨标签页同步失效的问题：第一个标签页完成领养上链后，第二个标签页的Web3实例因为本地缓存的块高没有刷新，轮询时直接走了拦截分支，根本没重新请求合约获取最新的领养人列表。
  修正方式：去掉无意义的同块高跳过逻辑，或者把跳过判断的依据换成合约事件日志的最新偏移量，不要单纯用块高做拦截。
• 轮询的闭包陷阱
  如果Adopter组件里写轮询的useEffect缺失依赖，闭包会捕获初始化时的旧Web3实例、旧dispatch引用，就算控制台能打印出轮询执行的日志，实际发起的合约请求还是拿的初始化阶段的旧数据，根本触发不了新的状态更新。
  正确的轮询实现：

  // Adopter.js 轮询逻辑修正示例
  useEffect(() => {
    const pollTimer = setInterval(() => {
      dispatch(loadAdopters())
    }, 2000)
    // 组件卸载时清除定时器
    return () => clearInterval(pollTimer)
  }, [dispatch]) // 显式声明依赖，避免捕获旧的函数引用
  

可以省掉轮询的优化方向 #

• 直接给合约实例绑定领养成功的事件监听，只要链上触发新的领养事件，不管是哪个标签页发起的操作，直接派发loadAdopters action更新列表，同步延迟可以降到毫秒级，不需要依赖固定间隔的轮询。
• 利用window的storage事件实现跨标签页通信：第一个标签页完成领养操作后，往localStorage写入状态变更标记，第二个标签页监听到标记变化就立刻触发列表刷新，不需要等2秒的轮询间隔。

内容的提问来源于stack exchange，提问作者sultan