Edit

Derived values

egghead.io lesson 4: Derive Information from Models Using Views

Hosted on egghead.io

Any fact that can be derived from your state is called a "view" or "derivation". See The gist of MobX for some background.

Views come in two flavors: views with arguments and views without arguments. The latter are called computed values, based on the computed concept in MobX. The main difference between the two is that computed properties create an explicit caching point, but later they work the same and any other computed value or MobX based reaction like @observer components can react to them. Computed values are defined using getter functions.

Example:

import { autorun } from "mobx"

const UserStore = types
    .model({
        users: types.array(User)
    })
    .views(self => ({
        get numberOfChildren() {
            return self.users.filter(user => user.age < 18).length
        },
        numberOfPeopleOlderThan(age) {
            return self.users.filter(user => user.age > age).length
        }
    }))

const userStore = UserStore.create(/* */)

// Every time the userStore is updated in a relevant way, log messages will be printed
autorun(() => {
    console.log("There are now ", userStore.numberOfChildren, " children")
})
autorun(() => {
    console.log("There are now ", userStore.numberOfPeopleOlderThan(75), " pretty old people")
})

If you want to share volatile state between views and actions, use .extend instead of .views + .actions. See the volatile state section.