useCreateStore

React Hook used to instantiate new mobx-state-tree models inside of React Function Components.

It returns the instance created from the model specified.

useCreateStore(
  model: IAnyModelType,
  snapshot?: any,
  env?: any
): Instance<typeof model>

Parameters

• model IAnyModelType

  The mobx-state-tree model you want to instantiate.

• snapshot (optional) any

  The snapshot used to instantiate the model

• env (optional) any

  Environment specific data used when instantiating the model, see: Dependency injection

Basic example

Define our AppStore mobx-state-tree store/model.

// AppStore.js (mobx-state-tree model)
import { types } from "mobx-state-tree";
const AppStore = types.model({
  user: types.maybe(types.string),
});

Inside of the App we create the appStore using the useCreateStore hook.

import React from "react";
import { useCreateStore, useProvider } from "mobx-store-provider";
import AppStore from "./AppStore";

function App() {
  // Instantiate appStore inside the App component using useCreateStore
  const appStore = useCreateStore(AppStore);

  // Retrieve the Provider for the appStore
  const Provider = useProvider(AppStore);

  return (
    <Provider value={appStore}>
      {/* ------- The rest of your app ------- */}
    </Provider>
  );
}

export default App;

Note that in this example we also use the Provider component returned from the useProvider hook to supply the appStore to the rest of the application.

Next: useStore