Usage in Components

Let's start from the beginning. Let's say you have one entities-wrapped component called MyComponent:

// MyComponent.js
class MyComponent extends Component { /*...*/ }

export default (
  entities({
    contactResource: {
      type: 'contact'
    }
  })(
    MyComponent
  )
)

Here, you are declaring that your component, MyComponent, requires a resource of type 'contact'. This resource will be given to MyComponent via a prop named contactResource.

Let's look at what happens under the hood when one MyComponent is mounted on the page:

On mount, a discrete container is created for this instance. Capacitor attempts to provide the data that the component demands:

• First, it builds a request description.
• Then, it checks the store to see if this container has an active request.
• Then, it checks the store to see if a request which matches the request description has been made within the given tolerance threshold.
• Not finding either of these in the store, it starts a new ajax request.
• When this ajax request completes, it normalizes entity data and merges it into the store.
• The data is then pulled into the component via mapStateToProps.