Awesome
mobx-collection-store
Structured data store for MobX. Partially influenced by Backbone Collections.
Deprecation and migration
mobx-jsonapi-store
and mobx-collection-store
are deprecated in favor of datx
- it follows the same concepts, but adds support for MobX 4 and 5, better TypeScript support and more extensibility.
If you're new to the libraries, check out the datx examples and docs.
If you already use mobx-collection-store
, check out the migration guide.
Using JSON API? Check out mobx-jsonapi-store - All mobx-collection-store features, and JSON API helpers in one place.
Can be used with Redux DevTools.
Basic usage
import {Collection} from 'mobx-collection-store';
const collection = new Collection();
const john = collection.add({
id: 1,
firstName: 'John',
lastName: 'Doe'
});
const jane = collection.add({
id: 2,
firstName: 'Jane',
lastName: 'Doe'
});
console.log(collection.length); // 2
john.lastName = 'Williams';
console.log(john.lastName); // 'Williams'
For more advanced use-cases, check out the getting started guide, or the examples folder.
Installation
To install, use npm
or yarn
. The lib has a peer dependency of mobx
2.7.0 or later (including MobX 3).
npm install mobx-collection-store mobx --save
yarn add mobx-collection-store mobx
Since the lib is exposed as a set of CommonJS modules, you'll need something like webpack or browserify in order to use it in the browser.
Don't forget to prepare your code for production for better performance!
Getting started
The main idea behind the library is to have one instance of the collection that contains multiple model types. This way, there can be references between models that can handle all use cases, including circular dependencies.
- Installation
- Defining models
- References
- Configuring the collection
- Using the collection
- Persisting data locally
- Redux DevTools
API reference
The library contains the following elements:
License
The MIT License
Credits
mobx-collection-store is maintained and sponsored by Infinum.
<img src="https://infinum.co/infinum.png" width="264">