javascript - 如何构造mobx

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

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

最佳答案

我曾在Mobx＆react上进行过一些项目，所以我发现这种结构最适合我。

专卖店

网域商店

存储您的应用程序中需要的数据。
对于前。用户数据

查看商店

存储呈现您的应用程序所需的数据
对于前。加载，错误变量

楷模

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

服务

在这里您可以进行服务，api调用

组件

容器或智能组件

哑巴或演示组件