如何构建mobx

How to structure mobx

本文关键字：mobx 构建 何构建      更新时间：2023-09-26

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

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

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

存储

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

型号

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

服务

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

组件

  • 容器或智能组件
  • 哑或表象成分

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

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

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

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

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

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

相关文章：