如何在 Zustand 中存储任意键的列表？

Question

我的反应应用程序需要存储不同聊天室的聊天消息。聊天室的存在当然是动态的。目前在 Zustand 中，我将它们存储在如下定义的属性中：

messagesByChannel: Record<string, ChatMessageData[]>;

并像这样公开它们：

getMessages: (channelId) => {
        return get().messagesByChannel[channelId] || [];
},

当我在我的组件中使用它时，这似乎给了我一个无限循环错误：

const chatMessages = useChatStore((state) => state.getMessages(channel?.id));

有一次，我更改了组件，改为绑定到

getMessages

，而不是调用它，然后在需要时调用它。这导致没有重新渲染。

我确实考虑过将channelIds添加为直接在顶层的Zustand状态的键，但这感觉可能很混乱，并且会与TypeScript对正确输入的期望发生冲突。

解决此类问题的常用方法是什么？看起来这将是一个具有通用解决方案的常见问题，不是吗？

感谢您的所有意见，这是我加入 Zustand 的第一天 🙂！

Answer 1

@pavlo-sobchuk 的评论帮助我识别了问题并通过简单应用

useShallow()

来解决它，如下所示：

const chatMessages = useChatStore(useShallow((state) => state.getMessages(channel?.id)));