When to use ngrx/effect in angular2

Question

I have an anuglar2 project that communicates with an api. Recently, I decided to integrate ngrx/store to maintain the state of the components, and follow the dump-smart component architecture. But then while moving on, I read about ngrx/effect which can be used upon the api requests.

And here my question comes, why should I use the ngrx/effect library, over just calling the corresponding function in my service from my container component to perform the api request and on success dispatch action to save the returned values in my store.

Answer 1

If your case stays that simple, then you won't need an effect for it. Besides, the effect itself will do not much more than calling your service-method.

In short: If you project is very small and without many features, it will just cause you to write more code.

If you project is large, it will help you structure your data-flows and project-components.

---

When to use an effect:

When you want to trigger an action based on another action(in spoken english you would call this a side-effect) or when you want to add a generic error-handling or maybe a logging.

The way an effect works: The effect listens for any defined action(s) (e.g. LoadDataAction), then does some processing and returns any action(s) that are then processed by the store and distributed to a reducer or some other effect.

Example:

1. LoadDataAction is dispatched
2. an effect(loadData$) is triggered
3. the loadData$-effect calls the data-service
4. loading the data fails
5. the loadData$-effect return a LoadDataFailureAction

ngrx processes the action...

10. the LoadDataFailureAction might be picked up by:
    • a logger-effect(e.g. sends message to a server)
    • by an ui-notification-effect(e.g. displays message to user)
    • and/or by a reducer(e.g. persists the error-count or deletes something from the state)