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

1npm i mobx-store-provider

1yarn 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

1// App.jsx (Main App component, we use it to create and provide the store)
2import React from "react";
3import { useProvider, useCreateStore } from "mobx-store-provider";
4import AppStore from "./AppStore";
5import UserDisplay from "./UserDisplay";
6
7function App() {
8  // Create the AppStore instance
9  const appStore = useCreateStore(AppStore, { user: "Jonathan" });
10
11  // Get the Provider for the AppStore
12  const Provider = useProvider(AppStore);
13
14  // Wrap the application with the Provider passing it the appStore
15  return (
16    <Provider value={appStore}>
17      <UserDisplay />
18    </Provider>
19  );
20}
21
22export 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:

1// UserDisplay.jsx (A component, we use the store from above inside it)
2import React from "react";
3import { observer } from "mobx-react";
4import { useStore } from "mobx-store-provider";
5import AppStore from "./AppStore";
6
7function UserDisplay() {
8  // Get access to the store
9  const appStore = useStore(AppStore);
10  return <div>{appStore.user}</div>;
11}
12
13// Wrap it with mobx-react observer(), so updates get rendered
14export 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.

1// AppStore.js (mobx-state-tree store/model)
2import { types } from "mobx-state-tree";
3
4const AppStore = types.model({
5  user: types.string,
6});
7
8export 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