React中如何同步Store实例？多Store间Observable属性同步方案

首先核心思路很明确：让需要同步的两个Store共享同一个CategoricalStore实例。因为Mobx的@observable状态是绑定到实例上的，同一个实例的属性变化会被所有引用它的地方自动追踪并同步更新。

下面给你一步步拆解正确的实现方式：

1. 先定义你的CategoricalStore并创建单例实例 #

首先把基础的Store定义好，同时创建一个全局可复用的实例——这是实现同步的关键：

// categoricalStore.js
import { observable, action } from "mobx";

export default class CategoricalStore {
  @observable categories = [];

  // 推荐用action包裹状态修改逻辑，集中管理更可控
  @action
  addCategory = (category) => {
    this.categories.push(category);
  };

  @action
  clearCategories = () => {
    this.categories.clear();
  };
}

// 创建单例实例，所有需要同步的Store都引用这个实例
export const categoricalStoreInstance = new CategoricalStore();

2. 让需要同步的Store引用这个单例 #

比如StoreA和StoreB需要同步categories，直接导入上面的单例即可：

// StoreA.js
import { categoricalStoreInstance } from "./categoricalStore";
import { computed } from "mobx";

export default class StoreA {
  // 直接引用共享实例的categories
  get categories() {
    return categoricalStoreInstance.categories;
  }

  // 基于共享状态的计算属性也会自动同步
  @computed get activeCategories() {
    return this.categories.filter(cat => cat.isActive);
  }

  // 通过共享实例的action修改状态，所有引用的地方都会同步更新
  addNewCategory = (cat) => {
    categoricalStoreInstance.addCategory(cat);
  };
}

// StoreB.js
import { categoricalStoreInstance } from "./categoricalStore";

export default class StoreB {
  get categories() {
    return categoricalStoreInstance.categories;
  }

  clearAll = () => {
    categoricalStoreInstance.clearCategories();
  };
}

3. 不需要同步的Store创建独立实例 #

第三个Store如果不需要和前两个同步，直接创建自己的CategoricalStore实例就行：

// StoreC.js
import CategoricalStore from "./categoricalStore";

export default class StoreC {
  // 独立实例，状态和另外两个完全隔离
  private localCategoricalStore = new CategoricalStore();

  get categories() {
    return this.localCategoricalStore.categories;
  }
}

进阶：用依赖注入解耦（大型项目推荐） #

如果你的应用比较复杂，不想在Store里硬编码导入单例，可以用mobx-react的Provider和inject做依赖注入，更灵活也方便测试：

// App.js 根组件
import { Provider } from "mobx-react";
import { categoricalStoreInstance } from "./categoricalStore";
import StoreA from "./StoreA";
import StoreB from "./StoreB";

// 初始化各个Store实例
const storeA = new StoreA();
const storeB = new StoreB();

function App() {
  return (
    <Provider
      categoricalStore={categoricalStoreInstance}
      storeA={storeA}
      storeB={storeB}
    >
      {/* 你的应用组件 */}
    </Provider>
  );
}

然后修改StoreA，通过inject获取共享实例：

// StoreA.js（依赖注入版本）
import { inject, computed } from "mobx-react";

class StoreA {
  @inject("categoricalStore") categoricalStore;

  get categories() {
    return this.categoricalStore.categories;
  }

  // ...其他逻辑和之前一致
}

export default inject("categoricalStore")(StoreA);

关键注意点 #

• 绝对不要给需要同步的Store各自创建CategoricalStore实例，否则它们的categories是完全独立的，不会同步。
• 尽量用action包裹状态修改逻辑，不要直接修改@observable属性，这样能集中管理状态变化，避免出现不可预测的问题。
• 只要是引用同一个实例的categories，不管是在Store里还是React组件中，都会自动追踪状态变化并更新。

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