Binge On Code

Jun 8, 2023

145 readers

What is ngrx and how does it work?

A modern web application needs a modern solution to solve reactive programming issues. That is basically what ngrx is used for, as introduced in this article.

You may be wondering what we mean by angular state management, and how ngrx comes into the picture. Well, any state management is simply the ability to be able to predict your application’s look, feel and functioning from a common command point. The key here is command point and it is this which defines the core functionality when going angular redux way.

What is ngrx?

Simply put, it is a state management library which makes it possible to have angular redux pattern in a more angular friendly manner.

Redux pattern focuses on the principle of single source of truth. However, redux was primarily built with React Js in mind, and so, to come up with an analogous form of the same for angular redux, ngrx was thus formed.

If you were to use angular redux pattern, you will always focus on four key aspects of the redux architecture:

  • store.
  • actions.
  • reducers.
  • selectors.

These are the primary terms you will hear in the realm of angular state management. But, with angular ngrx, there is another addition:

  • effects.

The above may seem overly complicated, but not to worry, we will give a brief explanation of each to answer the question : how ngrx works.

Store.

Think of this as the single source of truth for your application. It is the store which keeps track of the current state of your application.

Actions.

These are what determine the next state of your application, following a certain event from your application.

Reducers.

These use the actions to create the next state of your application.

Selectors.

These make it possible to pick certain pieces of your application. Think of these as a fork which you use to pick a slice of the whole pie.

However, this hypothetical pie will keep on being replaced on each slice that is taken from it with a newer slice.

That means you will always get the latest slice of the slice you picked!

Effects.

Well, unless you are making a static web application, you will mostly not need effects.

Effects are used to ensure that data being fetched outside of the application cycle is done so in a disciplined manner, and handled as such too.

Conclusion.

Well, that is basically all about angular state management using ngrx. We have covered:

  • What is ngrx.
  • A simple explanation of all it’s moving parts.

So, this being a simple introductory guide, we will not dive into the technical aspect of angular ngrx. These will be covered later on in this series.

Well, that is it for now.

Happy coding!

Related Articles

What is ngxs and how to use it in angular

Any modern web application needs a modern way of handling reactive programming challenges. In this guide, we will look at how ngxs can help you achieve this.

Jun 8, 2023

Views 1337

Angular JavaScript React CSS Django Python React Native Next JS State Management Django Rest Framework Unity