https://github.com/space-fe/mobx-state-tree-normalizr
Normalizr for mobx-state-tree
https://github.com/space-fe/mobx-state-tree-normalizr
built-in entity mobx-state-tree native normalizr schemas
Last synced: 6 months ago
JSON representation
Normalizr for mobx-state-tree
- Host: GitHub
- URL: https://github.com/space-fe/mobx-state-tree-normalizr
- Owner: space-fe
- License: mit
- Created: 2019-09-23T02:58:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T06:14:34.000Z (almost 3 years ago)
- Last Synced: 2025-03-25T21:12:02.679Z (6 months ago)
- Topics: built-in, entity, mobx-state-tree, native, normalizr, schemas
- Language: JavaScript
- Homepage:
- Size: 395 KB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mobx-state-tree-normalizr
Mobx-state-tree-normalizr helps you normalize data with [mobx-state-tree's](https://github.com/mobxjs/mobx-state-tree) model definition.
## Install
Install from NPM repository using yarn or npm
```javascript
npm install mobx-state-tree-normalizr
```
```javascript
yarn add mobx-state-tree-normalizr
```
## Motivation
[Mobx-state-tree](https://github.com/mobxjs/mobx-state-tree) provides a way to denomalize related data with reference but lacks of data normalization support. In order to nomalize the data retrieved from the backend service, people may use third-party libraries like [normalizr](https://github.com/paularmstrong/normalizr). However, these kinds of packages may need you to define another schema other than mobx-state-tree built-in `type.model` for a specific resource which will introduce duplication to the schema definition.
Mobx-state-tree-normalizr is tool that aims to normalize your data based on mobx-state-tree built-in `types.model` without third-party schema definition.
**Notes**: If you are not familiar with the nomalization term, please take a look at its [documentation](https://github.com/paularmstrong/normalizr) for more information.
## Instructions
### normalize
mobx-state-tree-normalizr only provide a method call `normalize`, it take two params:
1. First parameter: `originalData`(the nested data you might fetch from somewhere)
2. Second parameter: `model`(the model of [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree))
#### parameter: model
We use [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree)'s `types.model` to normalize our data. But because model in mst is very powerful and elastic, we need some constraints when you define your model:
1. Mobx-state-tree-normalizr use model's name to define your entity type, so you should define your model like this `types.model('some name', {....})`. If the name parameter is not given, We will consider that this model corresponds to not an entity.
2. An entity must have a primary key distinguishing itself from other entities with the same type. The primary key will be the attribute with the `types.identifier` type in your model if provided and will use `id` as the default value.
## Usage
The original data might look like this:
```javascript
const originalData = {
id: '123',
title: 'My awesome blog post',
author: {
id: '1',
name: 'Nana',
gender: 'm'
}
}
```
Now, when we use mobx-state-tree, we can build a model for this data structure like this:
```javascript
import { types } from 'mobx-state-tree'
const User = types.model('user', {
id: types.identifier,
name: types.string,
gender: types.enumeration('gender', ['m', 'n'])
})
const Article = types.model('article', {
id: types.string,
title: types.string,
author: types.maybe(types.reference(types.late(() => User)))
})
```
After that, we can use these models as schemas to normalize our nested data
```javascript
import normalize from 'mobx-state-tree-normalizr'
const normalizedData = normalize(originalData, Article)
```
Now, normalizedData will be:
```javascript
{
result: '123',
entities: {
'article': {
'123': {
id: '123',
title: 'My awesome blog post',
author: '1'
}
},
'user': {
'1': {id: '1', name: 'Nana', gender: 'm'}
}
}
}
```