MobX

MobX allows mutating state, in opposition to Redux.

Packages

npm i mobx mobx-react-lite

The mobx-react-lite package adds observers, which is a capability of observing store observables by the components. THose are necessary for apps to work correctly. mobx-react-lite supports only function components and mobx-react supports class components additionally.

Decorators

MobX allows to use decorators for indicating oservales, actions, etc. It’s an experimental feature and it needs to be enabled in tsconfig.ts, like this:

{
  "compilerOptions": {
...
    "experimentalDecorators": true
  },
...
}

Store Example

import { observable } from "mobx";
import { createContext } from "react";

class ActivityStore {
  @observable title = "Hello from mobx";
}

export default createContext(new ActivityStore());

In the component:

const activityStore = useContext(ActivityStore);
...
export default observer(App); //higher order component from mobx-react-lite package

Modifying state

MobX recommends to mutate state only inside actions. If using ASYNC code in actions state might be mutated outside of action! Solution is to use runInAction method after any async. Example:

@action
...
var activities = await agent.Activities.list();
    runInAction(() => {
    activities.forEach(n => {
        n.date = n.date.split(".")[0];
        this.activityRegistry.set(n.id, n);
    });
});

In order to see errors when we mutate state outside of actions, we can do:

configure({ enforceActions: "always" });

in a global context.

← React Routing