9

我正在尝试弄清楚如何构建我的应用程序，例如，我有一个模型 User、一个通用 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
}

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

4

3 回答 3

12

我用 Mobx & react 参与过一些项目，所以我发现这种结构最适合我。

专卖店

  • 域名商店
    • 存储应用程序所需的数据。
      例如。用户数据
  • 查看店铺
    • 存储展示您的应用程序所需的数据
      。加载，错误变量

楷模

  • 在这里您可以定义
    前用户模型的数据模型

服务

  • 在这里可以进行服务、api调用

成分

  • 容器或智能组件
  • 愚蠢的或表现性的组件
于 2016-12-09T18:45:35.920 回答
8

正如您可能已经注意到的那样，MobX 并没有规定如何构建存储，因此有很多方法可能。

但就个人而言，我确实会以这种方式进行大致设置（类似于文档中建议的商店设置）。它可能有点过时，但很容易遵循恕我直言，它是一个可扩展的模型，具有明确的关注点分离。可以在这个示例 repo或相关项目（如mobx-reactor ）中找到替代方法

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

于 2016-04-29T09:37:21.253 回答
0

Mobx 本身有一些官方文档描述了他们对结构的想法。

本节包含我们在使用 MobX 时在 Mendix 发现的构建大型可维护项目的一些最佳实践。这部分是固执己见的，您绝不会被迫应用这些做法。使用 MobX 和 React 的方式有很多种，这只是其中一种。

在此处阅读文章：https ://mobx.js.org/defining-data-stores.html

于 2022-02-22T13:03:41.150 回答