react-entity-getter
v0.0.8
Published
A helper class to query redux state for entities
Downloads
22
Maintainers
Readme
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
- Add this package to your package.json file.
$ npm install --save react-entity-getter
Create a utility file to hold your state entity getter.
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`;
};
- 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);
- 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 });