Mobx-State-Tree Persist

Easily persist and rehydrate your MobX-State-Tree data stores.

Usage

Configure which nodes from data tree should be persisted and use the persist API. Each node can be individually configured:

Setup

1const BearModel = types.model('bear')
2  .props({
3    number: types.optional(types.number, 0)
4  });
5
6const FishModel = types.model('fish')
7  .props({
8    number: types.optional(types.number, 0)
9  });
10
11const RootModel = types.model('root')
12  .props({
13    fish: FishModel,
14    bear: BearModel,
15  });
16
17const rootStore = RootModel.create({
18  fish: {},
19  bear: {},
20});
21
22const persistStore = persist([
23  [rootStore.bear, {key: "bear", storage: AsyncStorage}],
24  [rootStore.fish, {key: "fish", storage: AsyncStorage}],
25])

Rehydrated?

The call to persist returns a state tree node in intself that can obvserved in any component. The node contains a isRehydrated computed value that flips to true once each configured store has had a chance to load data.

1// Example in React
2import {observer} from 'mobx-react-lite';
3
4const App = observer(() => {
5
6  // return 'null' until store rehydrated
7  if (!persistStore.isRehydrated) {
8    return null;
9  }
10
11  return (
12    // app content
13  );
14});

Options

option	Description
key	required - key which the data is stored within the Storage Engine.
storage	required - Storage Engine the node is saved within. Any engine can be used that implements the Storage Interface
delay	optional - delay timeout in ms before data should be written out to Storage Engine. Default value: 0
whitelist	optional - configure which keys from the snapshot should be persisted. Default: all keys.

Storage Interface

Any Storage Engine may be used that implements the following interface:

1export type Storage = {
2  getItem: (key: string) => Promise<string | null | undefined>;
3  setItem: (key: string, data: string) => Promise<void>;
4};