EasyPeasy store hook 导致在任何状态更改时重新渲染

Question

我们目前有一个 redux state，其嵌套模型具有以下结构。

{
  groups: {
    ids: [],
    status: {},
    error: {}
  },
  members: {
    ids: [],
    status: {},
    error: {}
}

为方便起见，每个模型都有一个导出的挂钩，类型为；

export const useGroupState = () => useTypedState((state) => state.groups);

并这样使用；

const { ids } = useGroupState()

我们在整个应用程序中都使用这种语法。然而，我们最近注意到，在任何状态更改为 GroupState 时，即使它不修改 id，也会导致重新渲染。如果 Groups.status 更新，任何使用上述语法破坏的内容都将重新呈现。

我们使用

解决了这个问题

const ids = useTypedState(({groups}) => groups.ids)

但是，旧语法很方便，而且相当普遍。有没有一种方法可以保留旧语法但修复重新呈现行为？

谢谢，

Answer 1

我不知道这里 useTypedState 挂钩的确切实现，但假设它使用 React-Redux useSelector hook inside：是的，这完全是预期的行为。 useSelector 如果 returned 引用自上次 以来发生变化，则重新呈现。如果您 return 一个对象，并且该对象被不可变地更新，那么它就是一个新的引用并将强制重新渲染。仅对部分字段进行解构在渲染进行后。

Your component should always select the smallest amount of actual state that it needs.

EasyPeasy store hook 导致在任何状态更改时重新渲染

EasyPeasy store hook causes rerender upon any state change

state

redux

easy-peasy