MobX-State-Tree中处理服务端生成ID的REST模式最佳实践

概述

在现代Web应用开发中，客户端创建数据后通过POST请求发送到服务端，服务端存储数据并生成唯一ID后返回完整数据是一种非常常见的REST模式。然而在使用MobX-State-Tree(MST)框架时，由于标识符(identifier)的不可变特性，这种模式可能会遇到一些实现上的挑战。

核心问题分析

MST中的identifier和identifierNumber类型字段具有以下特点：

1. 它们是必填字段，不能为可选类型
2. 一旦设置就不可更改(immutable)
3. 用于唯一标识模型实例

这些特性使得在客户端创建数据时无法预留ID字段，而服务端返回带ID的数据后又需要处理标识符的初始化问题。

解决方案架构

为了解决这一问题，我们可以采用视图模型(ViewModel)与数据模型分离的设计模式：

1. 数据模型(Note模型)

数据模型严格对应服务端数据结构，包含服务端返回的所有字段，包括服务端生成的ID：

const Note = types.model("Note", {
  id: types.identifierNumber,
  title: types.string,
  message: types.string,
  date: types.string
});

2. 视图模型(FormViewModel)

视图模型负责处理用户界面交互和临时数据状态，它不直接包含ID字段：

const FormViewModel = types.model("FormViewModel", {
  note: types.maybe(Note),
  title: types.maybe(types.string),
  message: types.maybe(types.string),
  date: types.maybe(types.string)
})

实现细节

数据转换视图

在视图模型中添加计算属性，将表单数据转换为服务端所需的格式：

.views((self) => ({
  get formData() {
    const { title, message, date } = self;
    if (!title || !message || !date) {
      throw new Error("缺少必填字段");
    }
    return { title, message, date };
  }
}))

创建完整数据实例

当从服务端获取ID后，使用该ID和表单数据创建完整的Note实例：

.actions((self) => ({
  createNote(id: number) {
    const note = Note.create({
      ...self.formData,
      id
    });
    self.note = note;
  }
}))

完整工作流程

1. 用户在界面填写表单数据，这些数据存储在视图模型中
2. 提交时，从视图模型获取formData(不含ID)
3. 将formData发送到服务端
4. 服务端返回生成的ID
5. 使用返回的ID和原始formData创建完整的Note实例
6. 将Note实例存储回视图模型

高级应用场景

这种模式还可以扩展处理更复杂的情况：

1. 字段转换：在formData视图中进行数据格式转换(如日期格式化)
2. 数据验证：在创建Note实例前进行更复杂的业务规则验证
3. 批量处理：视图模型可以维护多个待创建的数据项
4. 错误处理：完善各种错误情况的处理逻辑

总结

通过视图模型和数据模型的分离，我们既保持了MST类型系统的严谨性，又实现了与标准REST模式的兼容。这种架构不仅解决了服务端生成ID的问题，还为应用提供了良好的扩展点，可以方便地处理各种业务场景。

在实际项目中，开发者可以根据具体需求调整这一模式，例如添加加载状态管理、乐观更新等特性，以提供更好的用户体验。