Entman
A library to help you manage your entities in a redux store when using normalizr. Entman takes care of retrieving them from the store and creating, deleting and updating the entities while keeping the relations between them in sync.
The idea is that everything that has a model in the backend should be an entity in the frontend. The management of entities is usually something very straightforward but tedious, so you leave this work to entman and you can focus on the rest.
Install
Install it as a node module as usual with npm along its peer dependencies:
$ npm install -S entman redux normalizr
Or using yarn:
$ yarn add entman redux normalizr
Example
A quick example to see entman in action:
schemas.js
We use schemas to define relationships between our entities. We can also define methods that will be available in the entity and serve like some sort of computed property.
; const Group = ; const User = ; // Generate and export the schemas. Schemas will be exported as an object// with the name of every schema as the keys and the actual schemas as values. Group User
reducer.js
Connect the entities reducer to the state.
;;; // Other reducers, entities:
store.js
Connect the entman middleware to the store.
;;; store ;
selectors.js
Create selectors that will retrieve the entities from the store. Selectors also take care of populating relationships and adding the getter methods defined in the schema. It's recommended to wrap entman selectors intead of using them directly so they're abstracted from the rest of the system.
;; { return ;}
actions.js
Create some actions using the helpers from entman. The helpers will take an action and wrap it with entman functionality. This way, you can still react in your reducers to your own actions and the entity management is just a side effect that entman will take care of.
;; const CREATE_USER = 'CREATE_USER'; { return ;}
Group.jsx
Finally, use your actions and selectors like you would normally do.
import React from 'react';import connect from 'react-redux';import getGroup from './selectors';import loadGroup createUser from './actions'; Component { ; this_handleInput = this_handleInput; this_handleAddUser = this_handleAddUser; } { const loadGroup params = thisprops; ; } { const group = thisprops; return <div> <h1>groupname</h1> <h2>group members</h2> <ul> groupusers </ul> thisstateshowForm && this ! thisstateshowForm && <button ="button" => Add </button> </div> ; } { return <div> <input ="text" = /> <button ="button" => Cancel </button> <button ="button" =>Save</button> </div> ; } { this; } { const group createUser = thisprops; const name = thisstate; const user = name group: groupid ; ; } const mapStateToProps = state ownProps group: ; const mapDispatchToProps = loadGroup createUser; mapStateToProps mapDispatchToPropsGroup;
API
See the API Reference
LICENSE
MIT. See LICENSE for details.