Effectively managing side-effects in Angular with @ngrx/effects

In this article I’ll explain where side-effects fit into the bigger picture of your app architecture. Then I’ll explain how @ngrx/effects can be used to make this architecture work. I’ll also show examples of using @ngrx/effects, including how to test them. Finally I’ll talk about trade-offs and some thoughts on further abstractions. I originally wrote this as a way to explain @ngrx/effects to the rest of the frontend team at work so I’m making some assumptions about what you already know.

Assumptions I’m making about you:

• comfortable with JavaScript, including decorators and class syntax
• agree that pure functions are beneficial for managing complexity
• know about managing app state with @ngrx/store
• know how to write Angular apps, including services, NgModules, and testing

Separating view logic from side-effects

Pure functions are helpful for managing complexity. They greatly help...