{"id":21667142,"url":"https://github.com/space-fe/mobx-state-tree-normalizr","last_synced_at":"2025-04-12T01:32:09.743Z","repository":{"id":44058159,"uuid":"210252753","full_name":"space-fe/mobx-state-tree-normalizr","owner":"space-fe","description":"Normalizr for mobx-state-tree","archived":false,"fork":false,"pushed_at":"2022-12-10T06:14:34.000Z","size":404,"stargazers_count":9,"open_issues_count":13,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T21:12:02.679Z","etag":null,"topics":["built-in","entity","mobx-state-tree","native","normalizr","schemas"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/space-fe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-23T02:58:14.000Z","updated_at":"2023-10-24T10:54:33.000Z","dependencies_parsed_at":"2023-01-26T02:46:08.852Z","dependency_job_id":null,"html_url":"https://github.com/space-fe/mobx-state-tree-normalizr","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Fmobx-state-tree-normalizr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Fmobx-state-tree-normalizr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Fmobx-state-tree-normalizr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space-fe%2Fmobx-state-tree-normalizr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/space-fe","download_url":"https://codeload.github.com/space-fe/mobx-state-tree-normalizr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248504200,"owners_count":21115133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["built-in","entity","mobx-state-tree","native","normalizr","schemas"],"created_at":"2024-11-25T11:34:00.998Z","updated_at":"2025-04-12T01:32:09.725Z","avatar_url":"https://github.com/space-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mobx-state-tree-normalizr\n\nMobx-state-tree-normalizr helps you normalize data with [mobx-state-tree's](https://github.com/mobxjs/mobx-state-tree) model definition.\n\n## Install\n\nInstall from NPM repository using yarn or npm\n\n```javascript\nnpm install mobx-state-tree-normalizr\n```\n\n```javascript\nyarn add mobx-state-tree-normalizr\n```\n\n## Motivation\n\n[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.\n\nMobx-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.\n\n**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.\n\n## Instructions\n\n### normalize\n\nmobx-state-tree-normalizr only provide a method call `normalize`, it take two params:\n\n1. First parameter: `originalData`(the nested data you might fetch from somewhere)\n2. Second parameter: `model`(the model of [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree))\n\n#### parameter: model\n\nWe 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:\n\n1. 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.\n\n2. 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.\n\n## Usage\n\nThe original data might look like this:\n\n```javascript\nconst originalData = {\n  id: '123',\n  title: 'My awesome blog post',\n  author: {\n    id: '1',\n    name: 'Nana',\n    gender: 'm'\n  }\n}\n```\n\nNow, when we use mobx-state-tree, we can build a model for this data structure like this:\n\n```javascript\nimport { types } from 'mobx-state-tree'\n\nconst User = types.model('user', {\n  id: types.identifier,\n  name: types.string,\n  gender: types.enumeration('gender', ['m', 'n'])\n})\n\nconst Article = types.model('article', {\n  id: types.string,\n  title: types.string,\n  author: types.maybe(types.reference(types.late(() =\u003e User)))\n})\n```\n\nAfter that, we can use these models as schemas to normalize our nested data\n\n```javascript\nimport normalize from 'mobx-state-tree-normalizr'\n\nconst normalizedData = normalize(originalData, Article)\n```\n\nNow, normalizedData will be:\n\n```javascript\n{\n  result: '123',\n  entities: {\n    'article': {\n      '123': {\n        id: '123',\n        title: 'My awesome blog post',\n        author: '1'\n      }\n    },\n    'user': {\n      '1': {id: '1', name: 'Nana', gender: 'm'}\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Fmobx-state-tree-normalizr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspace-fe%2Fmobx-state-tree-normalizr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace-fe%2Fmobx-state-tree-normalizr/lists"}