Component HOC

Basic Usage

The most basic usage of redux-capacitor is to wrap a default export with an HOC

import { entities } from 'entities'

class Component extends React.Component {
  renderItems = () => {
    const { collection } = this.props
    return collection.items.map(item => <p>{item.bar}</p>)
  }

  render () {
    return this.renderItems()
  }
}

export default entities({collection: {type: 'foo'}})(Component)

In the above, {type: 'contact'} would reference a record type called contact defined in records.js

By wrapping this component with the entities HOC, a prop called collection would be passed to Component.

Component has a number of attributes on it containing data and information about the state of the collection: More on that here: Container Props

Configuration

• autoload (boolean): Defaults to true. If false, the resource is not fetched when the component mounts
• getId (function): A function that takes props as an argument
• defaultFilters (object): Any filters that we will initially fetch data with

getId example

Using getId allows you to pass down an id that you can use to fetch the single item on component mount via autoload: true

export default entities({
  people: {
    type: 'people',
    getId: props => props.personId
  }
})(Component)