Organizing stores for apps with MobX – Huiseoul Engineering

Organizing stores for apps with MobX  #mobx #javascript #react #reactjs

  • Organizing stores for apps with MobXMobX is a simple and scalable state management system that goes well with React and ReactNative.
  • Let’s take a look at how we can go about it with MobX stores.Let’s build a ToDo app to demonstrate.What stores will have?Stores will store either states of each domain or app-wide states.
  • Also it makes sense to have getter methods using @computed of MobX:@computedpublic get sortedToDos() { return this.toDos.sort((a, b) = b.createdAt – a.createdAt);}@computedpublic get isNewToDoValid() { return this.newToDo.isValid;}And some @action methods for strict mode:@actionpublic pushNewToList = () = { this.list.push(this.new); this.resetNew();}Have one ui store and many domain storesYour application might have application-wide ui states indicating if a modal is shown, menu button is pressed, etc.
  • These states have to be stored in somewhere and having an AppStore or UIStore might be a good idea for them.class UIStore { @observable public isModalOn: boolean; …}Every other store should represent their own domain such as UserStore, ToDoStore, etc.
  • One way to achieve this is to export an already instantiated object from store class.class ToDoStore { …}export default new ToDoStore();The other way is to use provider components and inject in mobx-react library.

MobX is a simple and scalable state management system that goes well with React and ReactNative. Often time when an app scales it makes sense to give it a logical structure. Let’s take a look at how…

@ReactDOM: Organizing stores for apps with MobX #mobx #javascript #react #reactjs

MobX is a simple and scalable state management system that goes well with React and ReactNative. Often time when an app scales it makes sense to give it a logical structure. Let’s take a look at how we can go about it with MobX stores.

has following properties among others.

@observable public toDos: IToDo[] = [];

of MobX:

return this.toDos.sort((a, b) => b.createdAt – a.createdAt);

methods for strict mode:

this.list.push(this.new);

this.resetNew();

might be a good idea for them.

, etc. They do not have to be in a hierarchy — flat structure should be fine in most cases.

States in stores should be the single source of truth for what they are representing. One way to make sure of this is to make stores singletons.

If you are not familiar already, a singleton is a class that can be instantiated only once. You can either use the Singleton pattern or simply do it by convention.

Stores need to be accessed from all components at all levels. One way to achieve this is to export an already instantiated object from store class.

library. Internally they are using React’s context to expose provided stores through all levels of components.

toDoStore: allStores.toDoStore,

Happy hacking!

Organizing stores for apps with MobX – Huiseoul Engineering