Why use ngrx/effects for http async calls

Question

There are many articles out there that recommend using ngrx/effects for handling async actions such as http REST calls. Instead of using effects, why can't we just use a regular service to make the http call and then take the result of that http call and dispatch an action? Doesn't that simplify things?

Answer 1

You can perfectly use a regular service and then dispatch an action, like this on a component.

this.store.dispatch({
   type: "SAVE_DATA",
   payload: data
});
this.saveData(data) // POST request to server
   .map(res => this.store.dispatch({type: "DATA_SAVED"}))
   .subscribe()

@ngrx/effect just abstracts this logic away from the component. By doing this with a functional programmic aproach (pure functions), code remains very easy to test.

I really recommend reading this article, since there are many solutions to problems that abuse effects

Post

Answer 2

Using ngrx/effects makes life more simpler than using service to make http call and then take the result and dispatch the action. As following

1. Effects provide abstraction to the service layer. Our components don't need to know about the services(http) layer. Components will only dispatch actions to get things done.

2. As Effects are basically service, code is written once and reused multiple times.