如何構建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

回答

相關問題