redux-entitize
Automated redux-state management for all your entities.
redux-entitize
helps you organize all your entities in unified and normalized state. It ships with:
- a reducer
- a set of action creators to populate your state with entity data
- a set of selectors to retrieve entities from the state
Install
yarn add redux-entitize# or npm install --save redux-entitize
Getting Started
1. Define your schemas
You need to tell redux-entitize about all your normalizr-schemas by defining a schemaMap
:
// schemaMap.js ; const userSchema = 'users';const commentSchema = 'comments' commenter: userSchema; const schemaMap = users: userSchema comments: commentSchema;
entities
-reducer
2. Add the // reducers.js ;;; const entitiesReducer = ; const reducers = ;
Note: In order for the selectors to Just Work™, the state slice must be called entities
.
Dispatch update actions
To add new entities or update existing ones, use updateEntityAction
/ updateEntitiesAction
.
To remove an entity from your state, use deleteEntityAction
.
// main.js ;; ; const store = ; store; store; store;
Note: Where these actions are actually dispatched is dependent on how your app is interacting with the API.
Select entities from state
redux-entitize
provides a selectors factory to simplify selecting entities from the state. It's strongly recommended to use these, because
- selected entities will be automatically de-normalized
- selectors are based on reselect, so they are memoized (otherwise you application will most likely be slow)
- selectors are meant to remain stable throughout changes of the internal
entities
-state
// selectors.js ; // Assuming we have that `schemaMap` variable from above when you created your schemas const selectors =
Import the selectors in your components and render data as you like.
// UserList.js ;; ;; { return // Get all entities of a type allUsers: // Get all entities of a type with certain IDs // (state.userList.filteredIds === ['id1', 'id2', 'id3']) filteredUsers: // Get a single entity of a type with a certain ID // (state.login.userId === 'id123') loggedInUser: ;} mapStateToPropsUserList;