mst-async-store

mst-async-store

An opinionated asynchronous store and container implementation for mobx-state-tree.

Reasoning

One of the most common challenges when implementing a store solution is how to handle asynchronous data sets. mst-async-store aims to simplify this by allowing you to create powerful asynchronous stores in a matter of seconds. An mst-async-store implements the most common fetch patterns and support fetch queues, fail states and time to live out of the box.

It's as simple as this:

import axios from 'axios';
import { when } from 'mobx';
import { createAsyncStore } from 'mst-async-store';

// Generate store model
const MyAsyncStore = createAsyncStore({
  name: 'MyAsyncStore',
  itemModel: MyModel,
  ttl: 10000,
  failstateTtl: 5000
  fetchActions: (self) => (
    {
      // Logic to fetch one item
      async fetchOne(id: string) {
        const data = await axios.get(`/one/${id}`);
        return MyModel.create(data.response);
      },
      // Logic to fetch many items
      async fetchMany(ids: string[]) {
        const data = await axios.get(`/many`, { ids });
        return data.response.map((d) => MyModel.create(d));
      },
      // Logic to fetch all items
      async fetchAll() {
        const data = await axios.get(`/all`);
        return data.response.map((d) => MyModel.create(d));
      },
    }
  )
});

// Instantiate store
const myAsyncStore = MyAsyncStore.create();

// Ask the store to return container with id 'foo'
const container = myAsyncStore.get('foo');
when(
  () => container.isReady,
  () => {
    const myModel = container.value;
    // myModel is an instance of MyModel
  }
);