Question

我正在试图弄清楚如何构建我的应用程序，例如，我有一个模型用户，一个通用的UserStore来跟踪所有用户加载到目前为止和一些UI相关的存储，如FriendList，PendingFriendList，BlockedUserList，LikedUserList，等等：

class User {
  id;
  @observable name;
  @observable avatar;
  // others functions and fields
}

class UserStore {
  @observable users = [];
  function resolve(id) { /*return by id*/}
  function createOrUpdateUser(json) { /* add user to this.users */ }
}

class FriendStore {
  @observable users = [];
  hasNextPage = true;
  currentPage = null;

  function loadNextPage(page) {
    api.loadFriends(page >= 0 ? page : this.currentPage + 1).then( users => {
      users.forEach( user => {
        this.users.push( UserStore.createOrUpdateUser(user) )
      })
    })
  }
}

class PendingFriendUsers {
  @observable users = [];
  @observable query = null;
  hasNextPage = true;
  currentPage = null;

  function loadNextPage(page) {
    // more or less like FriendStore
  }
}

class BlockedUserStore {
  // more or less like FriendStore
}

我的问题是：这是要走的路吗？或者有更好的方法吗？

Answer 1

我曾与Mobx＆amp; amp;反应，所以我发现这个结构最适合我。

商店

域名商店
- 存储您应用中需要的数据对于前用户数据
查看商店
- 存储展示您的应用所需的数据
  对于前加载，错误变量

模特

您可以在此定义数据模型
对于前用户模型

服务

在这里你可以提供服务，api电话

组件

容器或智能组件
哑或演示组件

Answer 2

正如您可能已经注意到的那样，MobX没有规定如何构建商店，因此可以采用多种方法。

但我个人大致会以这种方式设置（类似于docs中建议的商店设置）。它可能有点老式，但很容易跟随imho，它是一个可扩展的模型，明确分离关注点。可以在此example repo或相关项目中找到替代方法，例如mobx-reactor

小提示：在您的api回调中使用transaction，以便在通知任何观察者之前立即应用所有更改。

如何构建mobx

2 个答案: