An Introduction to NgRx/Store in Angular Application

Introduction

When building a medium or a large scale Single Page Application (SPA), stage management is matters. This article discussing the following very shortly.

1. State
2. Ngrx/Store
3. Single Source of Truth
4. Actions
5. Reducers
6. Selectors
7. Effects

In order to get a better understanding of NgRx, those are very important areas that should be clear.

Overview

State

The application state includes data(that is received via API calls), user inputs, variables, and so on.

In the modern javaScript frameworks such as Angular, every component has its own state. So the application states can be anywhere in the components.

In Angular, @Input() and @Output() decorators are using to pass data between parent and child components. And can use other different ways to share data between components that are siblings. The following diagram represents how data passing from components to components.

passing data between components (without store)

Passing data in this way is not a big deal when the application is small. But imagine the medium or large applications that have hundreds of thousands of components. Passing information in this way will definitely become complex and it will become hard to identify and fix any breaking changes in the states.

So to solve this problem the Ngrx starts smiling.

NgRx

NgRx is an open-source state management library.

It is inspired by Redux. It is a state management library for JavaScript applications.

NgRx provides a way to maintain the Angular Application’s state in a Single Source Of Truth.

Single Source Of Truth

This means that the state of your whole application is stored in an object tree within a single store.

Here store is the collection of application states. The application’s components can get reference via dependency injection.

Getting the reference to the store

So with the single store, all information in the application flows in one way.

The store has all the application states

The store is immutable. Cannot change the store directly. In order to make changes in this store, there is a feature called Actions.

Actions

Actions change the state of the store by using reducers. According to the dispatched action, the store executes the ideal operation.

Mainly action has two attributes

1. Type
2. Payload

The payload is an optional attribute. That takes additional metadata. The following code snippet represents an action.

Action (without payload)

Reducers

Reducer changing the state and returning the new state. And also it keeps the store immutable. Reducers take the current state and action as parameters.

Reducer (It is declared as switch statement)

Selectors

Selectors are pure function that receives the part of the application’s states.

Creating the selector

Calling that selector in the component

Pure function

If the function is pure, if every time calls that function and gives the same argument, it always returns the same result.

Pure function

Code snippet of a pure function

If the function is not pure, if every time calls that function and gives the same argument, it will return a different result.

Impure function

Code snippet of an impure function

Effects

Effects allow us to perform additional operations. For example, let’s say the action is dispatched to get the customers. Effects allow us to define additional tasks like what should do when the load is a success, what should do when an error occurred.

Effects allow us to perform additional operations

So the NgRx effects used to handle the side effects.

Code snippet of effect

So these are the main concepts in NgRx. The following diagram represents the overall general flow (State Management Lifecycle) of the application state in NgRx.

Reference: https://ngrx.io/guide/store

Conclusion

The NgRx provides global state management for your Angular Application. When you are working with the medium/large scale of project and state management is becoming very complex, The NgRx is the right choice for you.

Takeaways

1. State
2. Ngrx/Store
3. Single Source of Truth
4. Actions
5. Reducers
6. Selectors
7. Effects

Thank you

Thank you very much for spending your time. I hope this article will give you an idea about NgRx and how it works. Thanks