React+MobX+TS复杂层级应用的MobX数据结构设计咨询

问题背景 #

你基于React、MobX、TypeScript开发标签页式工作区应用，标签页存在层级关联（如从列表页打开编辑页），所有标签页共享全局存储。当前实现中，编辑标签页直接传入并修改全局Store中的实体对象，你认为这种方式不够合理，希望得到更优的MobX数据结构设计方案。

核心优化方向 #

1. 让业务实体成为MobX可观察对象

直接修改实体对象无法被MobX追踪，导致视图无法自动更新。需要将业务实体定义为可观察类：

import { makeAutoObservable } from "mobx";

export class Item {
  id: string;
  name: string;
  fileId?: string;
  file?: File;

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
    makeAutoObservable(this); // 使所有属性和方法可观察/绑定
  }
}

2. 增强全局Store的实体操作能力

原BaseListStore仅支持列表级操作，需扩展为支持单实体的查询、更新，确保所有数据变更都通过Store的action执行，统一数据流：

import { makeObservable, observable, computed, action } from "mobx";

export default class BaseListStore<TListItem extends Identifiable> {
  @observable protected items: Array<TListItem> = [];

  constructor() {
    makeObservable(this);
  }

  @computed get list(): Array<TListItem> {
    return this.items;
  }

  @action setItems(items: Array<TListItem>) {
    this.items = items;
  }

  @action addItem(item: TListItem) {
    this.items.push(item);
  }

  @action removeItem(item: TListItem) {
    this.items.splice(this.items.indexOf(item), 1);
  }

  // 新增：根据ID获取实体
  getItemById(id: string): TListItem | undefined {
    return this.items.find(item => item.id === id);
  }

  // 新增：更新实体属性（支持部分更新）
  @action updateItem(id: string, partial: Partial<TListItem>) {
    const item = this.getItemById(id);
    if (item) {
      Object.assign(item, partial);
    }
  }
}

3. 调整编辑标签页ViewModel的依赖方式

编辑标签页不再直接持有实体对象，而是依赖全局Store和实体ID，所有修改操作通过Store完成，确保数据变更可追踪、可回溯：

import { runInAction } from "mobx";
import BaseTabViewModel from "./BaseTabViewModel";
import { Item } from "../models/Item";
import SomeService from "../services/SomeService";
import SomeStore from "../stores/SomeStore";

class RedactorTabViewModel extends BaseTabViewModel {
  private readonly _itemId: string;
  private readonly _someStore: SomeStore;
  private readonly _someService: typeof SomeService;

  constructor(
    id: string,
    title: string,
    itemId: string,
    someStore: SomeStore,
    someService: typeof SomeService
  ) {
    super(id, title);
    this._itemId = itemId;
    this._someStore = someStore;
    this._someService = someService;
    this.getFile();
  }

  // 通过Store获取实体，确保始终引用全局最新数据
  get item(): Item | undefined {
    return this._someStore.getItemById(this._itemId);
  }

  getFile = () => {
    const item = this.item;
    if (!item?.fileId) return;
    this._someService.getFile(item.fileId).then((data: File) => {
      runInAction(() => {
        // 通过Store的action更新实体，而非直接修改
        this._someStore.updateItem(item.id, { file: data });
      });
    });
  };

  // 示例：编辑实体名称
  updateItemName = (newName: string) => {
    runInAction(() => {
      this._someStore.updateItem(this._itemId, { name: newName });
    });
  };
}

export default RedactorTabViewModel;

4. 优化标签页的创建逻辑

在列表标签页中打开编辑页时，只需传入实体ID和全局Store，无需传递实体对象：

// 在SomeTabViewModel中打开编辑标签页的方法
openEditTab = (item: Item) => {
  const editTabId = `edit-${item.id}`;
  // 检查是否已存在该编辑标签，避免重复创建
  const existingTab = this._tabManager.allTabs.find(tab => tab.id === editTabId);
  if (!existingTab) {
    const editTab = new RedactorTabViewModel(
      editTabId,
      `编辑 ${item.name}`,
      item.id,
      this._someStore,
      this._someService
    );
    this._tabManager.addTab(editTab);
  } else {
    this._tabManager.setCurrentTab(existingTab);
  }
};

优化后的优势 #

• 数据流统一：所有数据变更都通过Store的action执行，避免直接修改实体导致的状态混乱
• 自动响应更新：实体和Store都是可观察对象，修改后所有依赖该数据的标签页（如列表页和编辑页）会自动同步更新
• 可维护性提升：ViewModel仅负责业务逻辑和视图交互，数据操作完全由Store管理，职责清晰
• 避免重复状态：编辑页和列表页共享同一全局Store中的实体，无需维护重复的实体副本

内容的提问来源于stack exchange，提问作者Bashtblrkin