Architecting Angular Applications with Redux, RxJS, and NgRx

Creating our first effect – a realistic scenario

The following scenario can be found in the code repository under Chapter9/DemoEffects.

This sounds a bit cryptic, so let's take a realistic scenario. You want to fetch products using AJAX from an endpoint. If you think about what you are about to undertake in the following steps:

1. Dispatch a FETCHING_PRODUCTS, this sets up our state so we can see that an AJAX request is under way and we can thereby use this to display a spinner for as long as the AJAX request is waiting to complete.
2. Perform an AJAX call and retrieve your products.
3. If successfully retrieving the products, then dispatch FETCHING_PRODUCTS_SUCCESSFULLY.
4. If there is an error, then dispatch FETCHING_PRODUCTS_ERROR. 

Let's solve ...