Handle Async Operations with ngrx Effects in Angular

Share this video with your friends

Send Tweet

Once a developer has wrapped their mind around redux and how it maps to ngrx in their Angular application, usually the very next question that comes up is "Great! Now how do I handle operations that need to do something asynchronous like save data to the server first?" This is a great question and neatly solved with ngrx effects. Ngrx effects give us the ability to handle operations that involve side effects by operating as middleware in our application as it sits between our components and our reducers. In this lesson, we will see how to properly sequence ngrx effects by splitting our actions into a trigger action and a completed action. This allows the trigger action to initialize an ngrx effect sequence and then hand off the end-result via a completed action. The beautiful thing about ngrx effects is that it gives us a very tidy place to capture complex business logic into observable streams that we can use to coordinate complex control flow scenarios.

Wilgert Velinga
Wilgert Velinga
~ 5 years ago

Why are your action.payload properties declared private in the constructor? Ah I see, you changed it to public before doing the effects (because there you access action.payload so TypeScript would not allow you to do it. As can be seen in the GitHub: https://github.com/onehungrymind/egghead-reactive-angular/blob/06-async-events-with-effects/libs/core-data/src/lib/state/projects/projects.actions.ts#L30 )

TypeScript could have helped you earlier with this if you had put the type of the action parameter of the reducer to ProjectsActionsTypes. This has the added benefit of warning you if you use a wrong ActionType. Unfortunately TypeScript does not warn you when you forget to handle an ActionType.