Before having a stage management store, we did not have any single centralized way to manage the application state. But now with certain out-of-the-box solutions, we can manage the state in a single centralized place efficiently.

NGRX

NGRX State Management Lifecycle

NgRx  is a state management reactive library inspired by Redux. It has a central storage system which acts as a single source of truth for managing the Angular application state at any point in time without mutating the application state.

NGRX FLOW DIAGRAM

The diagram above describes the flow of NgRx.

Consider this – say, from any component we dispatch any action and this action contains type and optionally payload. Here, type defines the action type and payload holds data to update into the store. Then it goes to the reducer function and based on the action type, performs code onto the copy of the state and returns the new state. Then the data is forwarded to the application store where the old state is overridden by the new state.

A selector is called to fetch the state whereas an effect is used to handle the side effects like http calls where one action returns new actions or observables subsequently to handle asynchronous calls.

NGRX Concepts

Store:  A central place to store the entire state of the application.

Selector:  Function to fetch the state from the Store.

Action:  It is an object. acting as an identifier of what kind of action is to be performed based on its types – Property and optionally payload.

Dispatcher:  It helps to dispatch the action to the reducer.

Reducer: It is a function that gets the current state in the store and the action is passed as input by the library automatically. Based on that, it is found out which kind of action is involved. Then the code is performed onto the copy of the state based on payload, passed optionally.

Effects: Unlike reducers, effects work asynchronously, and listen to the action as observable. Based on the response, it returns new actions, and at the final stage, calls the reducer to update the state.

INSTALLATION

npm install  –save  @ngrx/store

npm install –save  @ngrx/effects

IMPLEMENTATION

 Actions: 

Create an ingredient.action.ts  file and add the following code.

State management in Angular Code Step 1

State management in Angular Code Step 2

Start importing Action from @ngrx/store and import the Ingredient Bean as well.

Define the constant variable or enum as an action identifier. Create a class for each action and implement the action. An action interface has two properties – a type and an optional payload. The type is to identify the action and to update the store with the given payload if the payload is available at all.

Reducer: 

Create the ingredient.reducer.ts  file and add the code given below.

State management in Angular Code Step 3

State management in Angular Code Step 4

Here in the reducer file, first, create the initial state which is constant for assigning the initial state. Then create the ingredient Reducer function for handling the action. Based on the action type, run the code into the switch statement. Always copy the passed state using a spread operator and then update the required properties and return the new state.

Now create the auth.effects.ts  for handling the side effects while making the HTTP call.

State management in Angular Code Step 5

State management in Angular Code Step 6State management in Angular Code Step 7

Here, first, create the AuthEffects class for listening to the LOGIN_START  action and mention the action in OfType. Then handle it and after successful https calls, new action LOGIN is to be called to add user details to the store.

Register the reducer thus created and also the effects to the app.module.ts file under the imports section.

State management in Angular Code Step 8

Now Add dispatch and selector functions to modify and fetch respectively by injecting the store in the constructor.

Constructor Injection:

State management in Angular Code Step 9

Dispatch Call:

State management in Angular Code Step 10

Selector Call:

State management in Angular Code Step 11

CONCLUSION: 

In this blog, we have seen NgRX syntax, its flow and working functionality. We have learnt about creating Action, Reducer, Effects and registration thereof. NgRx is an excellent approach for solving the state management problem in large applications, especially in angular, where we have a centralized store. NgRx handles the side effects too and once the setup is done, you are  good to go. But NgRx has its disadvantages as well. It adds lots of boilerplate code and brings complexity to the code when small or medium sized applications can easily be managed by services & components without involving such intricacies. So, it is wise to go for NgRx when dealing with large applications – we are sure you will find many solutions once you adopt this approach.