EasyEasy存储挂钩会在任何状态更改时导致重新发送

Question

我们目前有一个具有以下结构的嵌套模型的redux状态。

{
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 ReduxuseSelector钩子：是的，这完全是预期行为如果返回的引用自上次以来发生了更改，则useSelector将重新渲染。如果返回一个对象，并且该对象被不可更改地更新，那么它就是一个新的引用，并将强制重新渲染。渲染过程中之后，仅破坏部分字段。

您的组件应该始终选择所需的最小实际状态。