How to structure mobx

Question

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 ??

Disclaimer: I am author of the repository https://github.com/rwieruch/react-mobx-soundcloud, but maybe the minimal boilerplate folder structure for a real world application gives you some more insights how an application can get structured. — Robin Wieruch, Aug 06 '16 at 10:49
A bigger real world MobX App: https://github.com/rwieruch/favesound-mobx — Robin Wieruch, Aug 27 '16 at 19:02

Kuldeep Saxena · Answer 1 · 2016-12-15T19:50:37.383

12

I've worked on some projects with Mobx & react, so I found this structure best suitable for me.

Stores

Domain Stores
- stores the data which'll be needed in your app.
  for ex. user data
View Stores
- stores the data which'll be needed to present your app
  for ex. loading, error variables

Models

Here you can define the data models
for ex- user model

Services

Here you can make services, api calls

Components

Container or Smart Component
Dumb or presentational component

edited Dec 15 '16 at 19:50

answered Dec 09 '16 at 18:45

Kuldeep Saxena

1,803
1
14
17

1

?? What's the difference between a UserStore and a UserModel in your structure? – AlxVallejo Jun 06 '17 at 16:11
UserModel is a simple class which has it's own properties & some functions. for e.g – Kuldeep Saxena Jun 19 '17 at 07:22
wut. I think some examples would go a long way here. I've since switched to Redux due to certain ambiguities with Mobx that just seem unreasonable to me. In Redux, you can set a default "model" for the store that you're using and keep them in the same file. If you're defining a model as a default state for that model, i'd put it in the store as default state. – AlxVallejo Jun 19 '17 at 13:07
@KuldeepSaxena hi, do you have any example repo ? or link , anyway thanks for your answer – Anudeep GI May 07 '20 at 10:47

score 8 · Answer 2 · answered Apr 29 '16 at 09:37

As you probably already have noticed, MobX doesn't prescribe how to structure stores, so there are many approaches possible.

But personally I would set up roughly in this way indeed (its similar to the proposed store setup in the docs). It's maybe a bit old-fashioned but it is easy to follow imho, it's a scalable model with clear separation of concerns. Alternative approaches can be found in this example repo or in related projects like mobx-reactor

Small tip: in your api callback use transaction so that all changes are applied at once before any observers are notified.

score 0 · Answer 3 · answered Feb 22 '22 at 13:03

Mobx itself has some official doc describing their thoughts about structures.

This section contains some of the best practices for building large scale maintainable projects we discovered at Mendix while working with MobX. This section is opinionated and you are in no way forced to apply these practices. There are many ways of working with MobX and React, and this is just one of them.

Read the article here: https://mobx.js.org/defining-data-stores.html

How to structure mobx

3 Answers3