mobx-store-provider

mobx-store-provider is a library that provides React Hooks to setup and access mobx-state-tree models from within React Function Components.

Its goal is to provide a straight-forward, minimalist, and terse API that allows you to easily incorporate mobx-state-tree into functional React components.

1. Installation
2. Basic example
3. API details and examples
   • useProvider - Provide your components with a store
   • useCreateStore - Create a new store inside a component
   • useStore - Use a store in a component
   • getStore - Use a store outside a component
4. Multiple stores
5. Local state
6. Typescript
7. Testing
8. Motivation
9. Upgrading 1.x -> 2.x

Installation

npm i mobx-store-provider

yarn add mobx-store-provider

Basic example

The following shows an example application using mobx-store-provider.

App component

At the core of the application we define the main App component.

Inside of the App we use hooks provided by mobx-store-provider to:

1. Create the appStore instance with the useCreateStore hook
2. Retrieve the Provider with the useProvider hook

// App.jsx (Main App component, we use it to create and provide the store)
import React from "react";
import { useProvider, useCreateStore } from "mobx-store-provider";
import AppStore from "./AppStore";
import UserDisplay from "./UserDisplay";

function App() {
  // Create the AppStore instance
  const appStore = useCreateStore(AppStore, { user: "Jonathan" });

  // Get the Provider for the AppStore
  const Provider = useProvider(AppStore);

  // Wrap the application with the Provider passing it the appStore
  return (
    <Provider value={appStore}>
      <UserDisplay />
    </Provider>
  );
}

export default App;

Note that we wrap the application with the Provider, supplying it the appStore as its value.

This makes the appStore available to the rest of the application.

Using the store

In another component somewhere in the application we want to use or gain access to the appStore.

To do this, we use the useStore hook:

// UserDisplay.jsx (A component, we use the store from above inside it)
import React from "react";
import { observer } from "mobx-react";
import { useStore } from "mobx-store-provider";
import AppStore from "./AppStore";

function UserDisplay() {
  // Get access to the store
  const appStore = useStore(AppStore);
  return <div>{appStore.user}</div>;
}

// Wrap it with mobx-react observer(), so updates get rendered
export default observer(UserDisplay);

Note that we also wrap the component with observer() from the mobx-react library.

This is critical, as it ensures the component will render any updates made to the appStore. For more information, see the observer documentation for the mobx-react library.

Defining the store

The code above uses the AppStore mobx-state-tree model. In the context of mobx-store-provider this is referred to as a store.

// AppStore.js (mobx-state-tree store/model)
import { types } from "mobx-state-tree";

const AppStore = types.model({
  user: types.string,
});

export default AppStore;

If you are new to mobx-state-tree, it is recommended you read through the mobx-state-tree documentation.

See the full docs