还原对象上的useSelector筛选？

Question

所以我使用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？

Answer 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