This resource will provide guides to leveraging Mobx State Tree. This is not final and will be updated periodically.

Extending

• Create a base model for your application. These actions could include the typical CRUD create, read, update, delete.

• Ensure types are extended so you can define component properties.

import { useEffect } from "react";
import { Instance, types } from "mobx-state-tree";

export const Model = types
  .model("Model")
  .props({
    id: types.identifier,
    // ...
  })
  .views((self) => {
    return {
      get displayName() {
        return self.id;
      },
    };
  })
  .actions((self) => {
    return {
      save() {
        console.log("saving...");
      },
    };
  });

export type ModelType = Instance<typeof Model>;

export const ItemModel = types.compose(
  Model,
  types
    .model("ItemModel", {
      // id extend...
      first: types.maybe(types.string),
      last: types.maybe(types.string),
    })
    .views((self) => {
      return {
        get displayName() {
          return `${self.first} ${self.last}`;
        },
      };
    })
    .actions((self) => {
      return {
        customAction() {
          console.log("custom action...");
        },
      };
    })
);

export type ItemModelType = Instance<typeof ItemModel> & ModelType;

// example usage
const item = ItemModel.create({ id: "1", first: "John", last: "Doe" });
item.displayName;
item.save();
item.customAction();

// example component with type reference
export const Component = ({ model }: { model?: ItemModelType }) => {
  useEffect(() => {
    model?.save();
    model?.customAction();
  }, []);
  return <div>model?.displayName</div>;
};