Categories
javascript mobx reactjs redux

How to structure mobx

I’m trying to figure out how to structure my app, for example, I have a model User, a generic UserStore to keep track all users load so far and some UI related stores like FriendList, PendingFriendList, BlockedUserList, LikedUserList, etc. like that:

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
}

My question is: Is that the way to go? Or is there a better way ??