mst-storebooster v1.1.2

List of peer dependencies:

• mobx-state-tree,
• mobx-devtools-mst,
• react,
• mobx,

How to install

• Install package
• Install all peerdependencies

How to create store

// Import package
import { configureStore } from "mst-storebooster";

// Import:
// RootStore - MST tree model,
// RootStoreModel - type of RootStore (aka Instance<RootStore>)
// RootStoreEnv - type of a global MST environment object with utils or tree nodes or trees themselves
// Any other MST tree models that were instantiated inside RootStore
import {
  RootStore,
  RootStoreModel,
  RootStoreEnv,
  bookPhoneWidgetStoreInstance,
  // ...other instances
} from "src/stores/models";

export type InstantiatedStoresType = typeof InstantiatedStoresBox;
export type BusType = typeof Bus;

export const InstantiatedStoresBox = {
  // master system's store instances;
  // other teams will have to mock instance that exist on the Bus for development;
  // they will not be distrubited with a package;
  // e.g., this store doesn't exist on the Bus -> Do not mock
  bookPhoneWidgetStore: bookPhoneWidgetStoreInstance,
  // e.g., a team needs some data from this store and gets access to it via Bus -> Mock path to this part of data
  IexistOntheBusStore: IexistOntheBusStoreInstance,

  // other teams' store instances;
  // master system will need these instances in dev;
  // It is team's duty to provide these instances in their npm packages
  team1RootStore: {
    // all instances of team1 stores must be put inside this object
    team1StoreForSth: team1StoreForSthInstance,
  },
  team2RootStore: {
    // all instances of team2 stores wiil be put inside this object
    team2StoreForSth: team2StoreForSthInstance,
  },
};

// all properties and their values must be declared in RootStoreEnv.
// Properties below are given as an example, they might not exist on the Bus
export const Bus = {
  // master system's bus data
  // other teams will haver to mock these for development
  commonLogoutUser: () => {
    // some common util
  },
  commonUserData: {
    // some common data needed for all teams
  },
  iExist: IexistOntheBusStore[0].doI.exist,
  // other teams' bus data
  // It is team's duty to provide these instances in their npm packages
  team1StoreParts: {
    // some parts from the store of a team that master system needs
    changeSth: team1StoreForSth.modelOfSth.changeSth,
    // ... other parts
  },
  team2StoreParts: {
    // some parts from the store of a team that master system needs
    changeSth: team2StoreForSth.modelOfSth.changeSth,
    // ... other parts
  },
};

// create root store with necessary stores and types
// and export all utils
export const { StoreProvider, useInject } = configureStore<
  RootStoreModel,
  RootStoreEnv,
  InstantiatedStoresType,
  BusType
>({
  RootStore,
  InstantiatedStoresBox,
  Bus,
});

How to use created utils

StoreProvider

// import created StoreProvider util in App.tsx
import { StoreProvider } from "src/stores";

// wrap your element in it

<StoreProvider>
  App Entry Point - Bomjour!
  <App />
</StoreProvider>;

useInject

import React, { FC } from "react";
import { observer } from "mobx-react-lite";
import { RootStoreModel, useInject } from "src/stores";

// create store selector function for injecting part of the Root store into a component;
// only one paramater and it is of type of RootStoreModel
// return value can be any data structure or primitives
const mapStore = ({ bookPhoneWidgetStore }: RootStoreModel) => bookPhoneWidgetStore.phoneInfo.changeView;

// observe changes via MRL **observer**
export const SomeNestedElement: FC<{}> = observer((props) => {
  // types are inferred
  const changeView = useInject(mapStore);

  const handleChangeView = () => changeView("newPage");
  return (
    <div className={"some class"}>
      <button className={"another class"} onClick={handleChangeView} />
    </div>
  );
});