为应用创建单个 MobX 商店的最佳方式是什么?

IT技术 reactjs react-native redux mobx mobx-react
2021-04-30 09:43:11

我已经使用 MobX 和 Redux 大约 6 个月了。我发现对于大多数应用程序,我更喜欢 MobX 的简单性。不过,我喜欢 Redux 的单一存储概念。我听到其他人评论说他们用 MobX 创建了一个故事,我正在尝试确定最佳方式。目前我创建了多个商店,然后将它们导入到一个商店中。

class UiStore {
  @observable uiData;

  constructor() {
    this.uiData = {}
  }

  @action updateUI = (data) => {
    this.uiData = {
      data: data
    };
  }
}

let uiStore = new UiStore();
export default uiStore;
class Store {
  @observable currentUser;

  constructor() {
    this.auth = authStore;
    this.ui = uiStore;
  }

}

let store = new store();
export default store;

在这里,我基本上创建了单独的存储,然后将它们组合成一个存储,类似于 redux reducer 的工作方式。

还有另一种/更好的方法吗?我想过可能将商店导入到不同的文件中,并将一些方法和数据放在类的prototype.

1个回答

我现在使用 MobX 一年以上,我基本上也是这样做的:

1)我有一个“主”或“父”商店,通常命名为 class Store {...}

2)然后我有一些较小的商店保存在“主”商店中。

3)我更喜欢在主人的商店构造函数中构造子商店。而且,我发现有时我的子商店必须观察父商店的一些数据,所以我传递this给子构造函数:

class UserStore {...}
class TodosStore {...}

class Store {
  constructor() {
    this.user = new UserStore(this);
    this.todos = new TodosStore(this);
  }
}

父级保留对子级的引用,每个子级都有对父级的引用。