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

Question

我已经使用 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 的工作方式。

还有其他/更好的方法吗？我想过也许将商店导入不同的文件并将一些方法和数据放在 class 的 prototype.

上

Answer 1

我使用 MobX 一年多了，我基本上也是这样做的：

1) 我有一家 "master" 或 "parent" 商店，通常命名为 class Store {...}

2) 然后我在 "master" 店里有一些小店。

3) 我更喜欢在 master 的商店构造函数中构建子商店。此外，我发现有时我的子商店必须观察父商店的一些数据，所以我将 this 传递给子构造函数：

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

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

父项保留对子项的引用，每个子项都有对父项的引用。

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

What is the best way to create a single MobX store for an app?

reactjs

react-native

redux

mobx

mobx-react