architecture.md

Architecture overview

You describe your entity model to ngrx-data in a few lines of entity metadata and let the library do the rest of the work.

Your component injects an ngrx-data EntityCollectionService and calls one or more of the standard set of command methods for dispatching actions.

Your component also subscribes to one or more of the service's Observable selectors in order to reactively process and display entity state changes produced by those commands.

Ngrx-data is really just ngrx under the hood. The data flows in typical ngrx fashion. The following diagram illustrates the journey of a persistence EntityAction such as QUERY_ALL for the Hero entity type.

1. The view/component calls EntityCollectionService.getAll(), which dispatches the hero's QUERY_ALL EntityAction to the store.

2. NgRx kicks into gear ...

   1. The ngrx-data EntityReducer reads the action's entityName property (Hero in this example) and forwards the action and existing entity collection state to the EntityCollectionReducer for heroes.

   2. The collection reducer picks a switch-case based on the action's op (operation) property. That case processes the action and collection state into a new (updated) hero collection.

   3. The store updates the entity cache in the state tree with that updated collection.

   4. Ngrx observable selectors detect and report the changes (if any) to subscribers in the view.

3. The original EntityAction then goes to the EntityEffects.

4. The effect selects an EntityDataService for that entity type. The data service sends an HTTP request to the server.

5. The effect turns the HTTP response into a new success action with heroes (or an error action if the request failed).

6. Ngrx effects Dispatches that action to the store, which reiterates step #2 to update the collection with heroes and refresh the view.