如何构建mobx

我想弄清楚如何构建我的应用程序，例如，我有一个模型用户，一个通用的UserStore来跟踪所有用户加载到目前为止，以及一些UI相关的商店，如FriendList，PendingFriendList， BlockedUserList，LikedUserList等：如何构建mobx

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 
}

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

来源

2016-04-29 Maximiliano Guzenski

免责声明：我是库的作者https://github.com/rwieruch/react-mobx -soundcloud，但是对于真实世界的应用程序来说，最小化的样板文件夹结构可以让您更深入地了解应用程序的结构。 –

更大的真实世界MobX应用程序：https：// github。com/rwieruch/favesound-mobx –

正如你可能已经注意到的那样，MobX没有规定如何构建商店，所以可能有很多方法。

但个人而言，我确实会这样设置（其类似于docs中提议的商店设置）。这可能有点过时，但很容易遵循imho，这是一个可扩展的模型，有明确的关注点分离。替代方法可以在此example repo或在相关项目中找到喜欢mobx-reactor

小提示：在您的API回调使用transaction，使所有的改变都在被告知任何观察员曾经之前应用。

来源

2016-04-29 09:37:21 mweststrate

我已经为Mobx &做过一些项目的反应，所以我发现这个结构最适合我。

房屋

域名房屋
- 商店which'll需要在你的应用程序中的数据。例如
  。 which'll需要用户数据
查看房屋
- 存储数据来呈现你的应用程序
  为前。加载，错误变量

模型

在这里，您可以定义数据模型
为前用户模型

服务

在这里，您可以使服务，API调用

组件

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

来源

2016-12-09 18:45:35

?? UserStore和UserModel在结构中有什么区别？ – AlxVallejo

UserModel是一个简单的类，它具有自己的属性和一些功能。例如 –

wut。我认为一些例子在这里会有很长的路要走。由于Mobx对我来说似乎不合理，因此我之后转而使用Redux。在Redux中，您可以为正在使用的商店设置默认“模型”，并将它们保存在同一个文件中。如果您将模型定义为该模型的默认状态，我会将其作为默认状态存储在商店中。 – AlxVallejo

回答

相关问题