# LobeHub Zustand 状态管理 ## 操作类型层次结构 ### 1\.公共行动 UI组件主要接口： * 命名：动词形式（`createTopic`, `sendMessage`） * 职责：参数验证、流程编排 ### 2\.内部操作（`internal_*`）核心业务逻辑实现： * 命名：`internal_`前缀（`internal_createTopic`） * 职责：乐观更新、服务呼叫、错误处理 * 不应该由UI直接调用 ### 3\.调度方法（`internal_dispatch*`）状态更新处理程序： * 命名：`internal_dispatch` \+实体(`internal_dispatchTopic`) * 职责：调用reducers，更新store ## 何时使用Reducer vs 简单的`set` **使用减速器模式：** * 管理对象列表/映射（`messagesMap`、`topicMaps`） * 乐观更新 * 复杂的状态转换 **使用简单`set`:** * 切换布尔值 * 更新简单值 * 设置单一状态字段 ## 乐观更新模式内部_createTopic：异步（参数）=> { const tmpId = Date.now().toString(); // 1. 立即更新前端（乐观） get().internal_dispatchTopic( { 类型：'addTopic'，值：{ ...params，id：tmpId } }， '内部创建主题' ）； // 2.调用后端服务 const topicId = 等待 topicService.createTopic(params); // 3. 刷新以保持一致性等待 get().refreshTopic(); 返回主题Id； }, **删除操作**：不要使用乐观更新（破坏性的、复杂的恢复） ## 命名约定 **行动：** * 公共：`createTopic`、`sendMessage` * 内部：`internal_createTopic`、`internal_updateMessageContent` * 调度：`internal_dispatchTopic` * 切换：`internal_toggleMessageLoading` **状态：** * ID 数组：`messageLoadingIds`、`topicEditingIds` * 地图：`topicMaps`、`messagesMap` * 活动：`activeTopicId` * 初始化标志：`topicsInit` ## 详细指南 * 动作模式：`references/action-patterns.md` * 切片组织：`references/slice-organization.md` ## 基于类的操作实现我们正在将切片从普通的“StateCreator”对象迁移到**基于类的操作**。 ### 模式 * 定义一个类，封装动作并在构造函数中接收`(set, get, api)`。 * 使用 `#private` 字段（例如，`#set`、`#get`）以避免泄漏内部结构。 * 更喜欢共享打字助手： * 来自“@/store/types”的“StoreSetter”，用于“set”。 * `Pick` 仅公开公共方法。 * 导出返回类实例的`create*Slice` 帮助器。类型 Setter = StoreSetter; 导出const createRecentSlice =（设置：Setter，获取：（）=> HomeStore，_api？：未知）=> 新的RecentActionImpl（设置，获取，_api）；导出类RecentActionImpl { 只读 #get: () => HomeStore; 只读#set：设置器；构造函数（设置：Setter，获取：（）=> HomeStore，_api？：未知）{ 无效_api； this.#set = 设置；这.#get = 获取; } useFetchRecentTopics = () => { // ... }; } 导出类型RecentAction = Pick; ### 成分 * 在存储文件中，将类实例与“flattenActions”合并（不要传播类实例）。 * `flattenActions` 将方法绑定到原始类实例，并支持原型方法和类字段。 const createStore: StateCreator = (...params) => ({ ...初始状态， ...flattenActions([ createRecentSlice(...params), createHomeInputSlice(...params), ]), }); ### 多类切片 * 对于需要多个操作类的大切片，请使用“flattenActions”将它们组合在切片条目中。 * 如果您需要组合多个类并隐藏私有字段，请使用本地 `PublicActions` 帮助器。 type PublicActions = { [K in keyof T]: T[K] }; 导出类型 ChatGroupAction = PublicActions< ChatGroupInternalAction & ChatGroupLifecycleAction & ChatGroupMemberAction & ChatGroupCurdAction >; 导出 const chatGroupAction: StateCreator< 聊天群组商店， [['zustand/devtools'，从不]]， [], 聊天组动作 > = (...参数) => flattenActions([ 新的 ChatGroupInternalAction(...params), 新的 ChatGroupLifecycleAction(...params), 新的 ChatGroupMemberAction(...params), 新的 ChatGroupCurdAction(...params), ]); ### 商店访问类型 * 对于依赖于其他类中操作的类方法，定义显式存储增强： *生命周期“switchTopic”的“ChatGroupStoreWithSwitchTopic” * `ChatGroupStoreWithRefresh` 用于成员刷新 * `ChatGroupStoreWithInternal` 用于凝乳 `internal_dispatchChatGroup` ### 做/不做 * **Do** ：保持构造函数签名与 `StateCreator` 参数 `(set, get, api)` 保持一致。 * **Do** ：使用 `#private` 来避免 `set/get` 被暴露。 * **Do** ：使用 `flattenActions` 而不是传播类实例。 * **不要** ：同时保持旧切片对象和类操作处于活动状态。

状况

包含技能