是否对对象进行Redux useSelector筛选

Question

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

我可以在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-比较和更新