react-entity-getter

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 });