在自定义钩子中访问 Redux 选择器值答案

【问题标题】：Accessing Redux selector value in a custom hook在自定义钩子中访问 Redux 选择器值
【发布时间】：2021-12-23 11:54:48
【问题描述】：

我正在编写我的第一个钩子，我也使用 redux。我在 React native 中监听来自移动设备的方向传感器数据，当它更新时，我过滤它以查看新值是否与旧值不同，然后再将其发送到 redux 状态进行存储。

我注意到 filterData 方法中的数据始终为空。但是，如果我在渲染中控制台记录 storedVal，我会看到它一直在更新，并且它也在 Redux 存储中更新。

但由于某种原因，filterData 只能访问初始值，而不能获取更新后的值。知道如何解决这个问题吗？

  const storedVal = useSelector(selectors.selectStoredVal);

  const filterData = useCallback(
    () => {
      console.log(storedVal);
    },
    [storedVal]
  );

  useEffect(
     () => {
        orientation.pipe(filter(filterData)).subscribe((data) => {
             console.log('Data filtered correctly, new data received here');
        }
     }
  ), 
  [];
}

【问题讨论】：

filter() 函数有什么作用？它是在调用 filterData （它本身就是一个函数）吗？您的回调函数不返回任何内容，不是吗？如果您不使用useCallback，您的代码是否有效？请记住，这是一种优化技术，它实际上不应该改变代码的功能。
你的 useEffect 在 filterData...
尝试添加filterData函数作为useEffect的依赖，比如useEffect(() => {...}, [filterData])

标签： javascript react-native redux react-hooks

【解决方案1】：

useEffect 的空依赖数组意味着其中的回调函数只会运行一次（在组件挂载时）。

useCallback 正在创建一个传递给过滤器函数的函数。因为storedVal 是filteredData 的依赖项，所以storedVal 发生了变化并且filteredData 被更新为一个新函数，所以你的useEffect 仍然引用了它的旧值。

尝试将[filteredData] 添加到useEffect 的依赖项数组中。

【讨论】：

我正在订阅我的 useEffect 中的方向传感器，我不想在初始组件安装后重做。
是否有可能取消订阅然后重新订阅？或者是否有一种定位方法可以让您更新过滤器功能？对 react-native 不太熟悉抱歉。