0.0.8 • Published 7 years ago
react-entity-getter v0.0.8
React Entity Getter
The React Entity Getter is a helper class with functions that assist in retrieving redux entitites from state.
This is particularly helpful for connected React components in the mapStateToProps
function.
Getting Started
1) Add this package to your package.json file.
$ npm install --save react-entity-getter
2) Create a utility file to hold your state entity getter.
3) In the utility file, create a function that returns a path to your entities in redux state.
const pathToEntity = (entityName) => {
return `api.data.${entityName}.data`;
};
4) In the utility file, import this package and create a new instance of the EntityGetter
class, passing in your path to entities in redux state.
// ./utilities/entityGetter.js
import entityGetter from 'react-entity-getter';
const pathToEntity = (entityName) => {
return `api.data.${entityName}.data`;
};
export default entityGetter(pathToEntity);
5) In your connected React components, import your entityGetter
utility.
// ./pages/HomePage.jsx
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import entityGetter from '../utilities/entityGetter';
class HomePage extends Component {
static propTypes = {
dispatch: PropTypes.func,
};
render () {
const { user } = this.props;
return (
<div>Hello, {user.firstName}</div>
);
}
}
const mapStateToProps = (state) => {
const user = entityGetter(state).get('users').findBy({ isCurrentUser: true });
return { user };
};
export default connect(mapStateToProps)(HomePage);
Attributes
entities
- Returns all entities of the
entityName
in redux state.
Example:
const users = stateEntityGetter(state).get('users').entities;
Functions
findBy
findBy<A, B, C>(filters:A, options:B?) -> C?
- Returns the first entity matching the attributes passed to the function.
Options
- ignoreCase: matches the attribute value of an entity regardless of the case
Examples:
const user = stateEntityGetter(state).get('users').findBy({ isCurrentUser: true }); // returns a single User entity
const post = stateEntityGetter(state).get('posts').findBy({
title: 'My post',
published: true,
}); // returns a single Post entity
const users = stateEntityGetter(state).get('users');
const user = users.findBy({ first_name: 'mike' }, { ignoreCase: true }); // returns a single User entity
where
where<A,B, C>(filters:A, options:B?) -> [C]
- Returns an array of all entities matching the attributes passed to the function.
Options
- ignoreCase: matches the attribute value of an entity regardless of the case
Examples:
const entities = stateEntityGetter(state);
const user = entities.get('users').findBy({ isCurrentUser: true });
const post = entities.get('posts').findBy({ title: 'My post' });
const comments = entities.get('comments').where({
post_id: post.id,
user_id: user.id,
}); // returns an array of comments related to the post and user
const billUsers = entities.get('users').where({ first_name: 'bill' }, { ignoreCase: true });