Back to Details

zustand

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

LobeChat Zustand State Management

LobeChat Zustand 状态管理

Action Type Hierarchy

Action 类型层级

1. Public Actions

1. 公开 Actions

Main interfaces for UI components:
  • Naming: Verb form (
    createTopic
    , 
    sendMessage
    )
  • Responsibilities: Parameter validation, flow orchestration
UI组件的主要接口：
  • 命名：动词形式（
    createTopic
    、
    sendMessage
    ）
  • 职责：参数校验、流程编排

2. Internal Actions (
internal_*
)

2. 内部 Actions（
internal_*
）

Core business logic implementation:
  • Naming: 
    internal_
    prefix (
    internal_createTopic
    )
  • Responsibilities: Optimistic updates, service calls, error handling
  • Should not be called directly by UI
核心业务逻辑实现：
  • 命名：以
    internal_
    为前缀（
    internal_createTopic
    ）
  • 职责：乐观更新、服务调用、错误处理
  • 不应被UI直接调用

3. Dispatch Methods (
internal_dispatch*
)

3. 调度方法（
internal_dispatch*
）

State update handlers:
  • Naming: 
    internal_dispatch
    + entity (
    internal_dispatchTopic
    )
  • Responsibilities: Calling reducers, updating store
状态更新处理器：
  • 命名：
    internal_dispatch
    + 实体名（
    internal_dispatchTopic
    ）
  • 职责：调用Reducers、更新store

When to Use Reducer vs Simple 
set

何时使用 Reducer 而非简单 
set

Use Reducer Pattern:
  • Managing object lists/maps (
    messagesMap
    , 
    topicMaps
    )
  • Optimistic updates
  • Complex state transitions
Use Simple 
set
:
  • Toggling booleans
  • Updating simple values
  • Setting single state fields
使用 Reducer 模式：
  • 管理对象列表/映射（
    messagesMap
    、
    topicMaps
    ）
  • 乐观更新
  • 复杂状态转换
使用简单 
set
：
  • 布尔值切换
  • 更新简单值
  • 设置单个状态字段

Optimistic Update Pattern

乐观更新模式

typescript
internal_createTopic: async (params) => {
  const tmpId = Date.now().toString();

  // 1. Immediately update frontend (optimistic)
  get().internal_dispatchTopic(
    { type: 'addTopic', value: { ...params, id: tmpId } },
    'internal_createTopic'
  );

  // 2. Call backend service
  const topicId = await topicService.createTopic(params);

  // 3. Refresh for consistency
  await get().refreshTopic();
  return topicId;
},
Delete operations: Don't use optimistic updates (destructive, complex recovery)
typescript
internal_createTopic: async (params) => {
  const tmpId = Date.now().toString();

  // 1. 立即更新前端（乐观更新）
  get().internal_dispatchTopic(
    { type: 'addTopic', value: { ...params, id: tmpId } },
    'internal_createTopic'
  );

  // 2. 调用后端服务
  const topicId = await topicService.createTopic(params);

  // 3. 刷新以保证一致性
  await get().refreshTopic();
  return topicId;
},
删除操作：不要使用乐观更新（具有破坏性，恢复复杂）

Naming Conventions

命名规范

Actions:
  • Public: 
    createTopic
    , 
    sendMessage
  • Internal: 
    internal_createTopic
    , 
    internal_updateMessageContent
  • Dispatch: 
    internal_dispatchTopic
  • Toggle: 
    internal_toggleMessageLoading
State:
  • ID arrays: 
    messageLoadingIds
    , 
    topicEditingIds
  • Maps: 
    topicMaps
    , 
    messagesMap
  • Active: 
    activeTopicId
  • Init flags: 
    topicsInit
Actions：
  • 公开：
    createTopic
    、
    sendMessage
  • 内部：
    internal_createTopic
    、
    internal_updateMessageContent
  • 调度：
    internal_dispatchTopic
  • 切换：
    internal_toggleMessageLoading
状态：
  • ID数组：
    messageLoadingIds
    、
    topicEditingIds
  • 映射：
    topicMaps
    、
    messagesMap
  • 活跃状态：
    activeTopicId
  • 初始化标记：
    topicsInit

Detailed Guides

详细指南

  • Action patterns: 
    references/action-patterns.md
  • Slice organization: 
    references/slice-organization.md
  • Action 模式：
    references/action-patterns.md
  • 切片组织：
    references/slice-organization.md