如何构建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合作过一些项目并做出反应,因此我发现这种结构最适合我.

商店

• 域商店
  • 存储您的应用中需要的数据.
    对于前 用户数据
• 查看商店
  • 存储
    为ex 提供应用程序所需的数据.加载,错误变量

楷模

• 在这里,您可以
  为用户模型定义数据模型

服务

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

组件

• 容器或智能组件
• 哑或表现的组成部分

Answer 2

您可能已经注意到,MobX没有规定如何构建存储,因此有许多方法可行.

但就我个人而言,我确实会以这种方式大致设置(类似于文档中建议的商店设置).它可能有点老式,但很容易跟随imho,它是一个可扩展的模型,明确分离关注点.在此示例repo中或在诸如mobx-reactor的相关项目中可以找到替代方法

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