javascript - 如何构建 mobx

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 和 React 做过一些项目，所以我发现这种结构最适合我。

商店

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

模型

• 在这里你可以定义数据模型
  对于前用户模型

服务

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

组件

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