MobX Quick Start Guide

Actions

Once the observable state is identified, it is natural to include the actions that can mutate it. These are the operations which will be invoked by the user, and exposed by the React interface. In the case of the wishlist feature, this includes:

• Creating a new WishList 
• Deleting a wishlist
• Renaming a wishlist
• Adding items (WishListItem) to a wishlist
• Removing items from a wishlist

Actions that add or remove wishlists go into the top-level, WishListStore, while actions concerning items in a wishlist will be placed in the WishList class. The renaming of a wishlist can also go into the WishList class:

import { observable, action } from 'mobx';class WishListStore {    @observable.shallow lists = [];    /* ... */    @action    addWishList(name) ...