Redux useSelector 过滤对象？答案

【问题标题】：Redux useSelector filtering on object?Redux useSelector 过滤对象？
【发布时间】：2021-06-12 00:16:53
【问题描述】：

所以我使用 redux 和 useSelector 钩子从 store 中获取数据。

我可以在reducer数组中过滤特定数据，这样组件只在过滤后的数据发生变化时才更新，例如：

const images = useSelector(state => state.Reducer.images.filter(x => x.id === someID));

但是，当我尝试对对象进行相同类型的操作时，即使商店甚至没有更改，组件也总是会重新渲染。例如：

const images = useSelector(state => Object.keys(state.Reducer.images)
  .filter(x => x === someID)
  .reduce((arr, key) => {
    arr.push(state.Reducer.images[key].data);
    return arr;
  }, []));

为什么会发生这种情况？如何仅在数据更改时才更新？假设将一些深度比较函数传递给 useSelector？

【问题讨论】：

标签： javascript reactjs redux react-redux react-hooks

【解决方案1】：

您应该能够通过使用shallowEqual 来避免这些重新渲染。这将防止新的引用一直被认为是不同的。

const images = useSelector(state => Object.keys(state.Reducer.images)
  .filter(x => x === someID)
  .reduce((arr, key) => {
    arr.push(state.Reducer.images[key].data);
    return arr;
  }, []), shallowEqual);

https://react-redux.js.org/api/hooks#equality-comparisons-and-updates

【讨论】：