Angular: NGRX a clean and clear Introduction

Angular: NGRX a clean and clear Introduction

The objective of this article is to provide a clean and clear introduction to ngrx. In order to accomplish this, I am going to explain the things you need to know and understand about ngrx and then we are going to see it in action with some simple and understandable code examples.

Finally, I am going to provide the link to the GitHub repo containing the examples so you can play around with the code.

This is the list of topics that we are going to discuss in this article:

[…]

The main purpose of this pattern is to provide a predictable state container, based on three main principles.

Let’s go through the three principles of the Redux pattern and point out the most important benefits they provide.

In the case of a redux/ngrx architecture, this means that the state of your whole application is stored in an object tree within a single store.

[…]

You are never going to change the state directly instead you are going to dispatch actions. These actions describe what’s happening (can be things like getting, adding, removing, updating the state).

By avoiding to update the state from different places and having a centralized place to make changes, that responds to specific actions, you get a lot of benefits. Just to mention the most important ones:

The operation triggered by dispatching an action is going to be a pure function called, within the redux architecture, reducers.

[…]