mekwall
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
}
);