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.
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.