NGRX — Use Actions to create more reactive applications
The Issue:

With applications getting bigger and bigger we as developers need to find better solutions for passing data into our components and services, and this is where things get messy. When we look at Angular’s solutions we can see the upcoming growing pains.

1. Input() chaining — I hate seeing this. all components know exactly what state their child components have. this can be important and useful but usually, we just see one component getting data from Input and then passing it off to another. causing a lot of potentially breaking points.

2. Services — very easy, low maintenance, but data is still stored in memory and can causes files to become extremely large due to all the use cases we will create. and can be mistakenly reset by adding it as a provider in a component or module (without understanding why this may be done, there are valid use cases for this).

Nothing wrong with using the solutions mentioned above. but we can do better.

example of bad input chaining

Opinionated Solution

Ngrx is an amazing solution for storing and sharing data in our applications. In many applications, it becomes the single source of truth (as it should)

and is used mainly to make our UI react to data store changes as we go. Yes, we want to update our UI when the data we depend upon changes. But why stop at data changes? Why not “abuse” Actions?

Actions are our way to update our store and to initiate a process.

We usually use an *EffectsService and/or reducers for this. in which we listen to specific actions and run higher-level functions (HTTP calls for example, or normalizing the data before setting it in the store) in order to update our store and make our application react accordingly.

Fortunately, most Angular elements (Component/Services/Directives ) can listen to actions. this means that almost any element can listen to predesigned Actions made for it.

For example, if we have a button component, that listens to an action called ButtonLoaderAction and its props are props<{loading: boolean}> .

The button is agnostic, it is decoupled from any other logic. it is completely independent, it will only update when the action is called by whoever calls it.

Actions don’t do anything but send events to anyone listening to it, usually our reducers and/or effects , we can take advantage and use them in order to make our website react not only to data changes but to developer decisions. We decide when our application reacts and changes.

Passing the power, of when our application reacts, to the developer is already an emerging concept with updating the changeDetection strategy to onPush for example.
['Ryan Hoffnan']
['Web Development', 'JavaScript', 'Angular', 'Redux', 'Technology']