Introduction to State Management with NgRx

AJIL ANTONY | December 05, 2022

When creating scalable apps, structure and patterns are really helpful. Nx is a collection of build tools that aid in managing and maintaining a monorepo, organizing your codebase to include numerous reusable libraries, and scaling across numerous applications.

NgRx State Management: Overview

Building out application processes that follow certain events and manage the state of shared data in a reactive, explicit, and consistent manner is made possible by using NgRx for state management in an Angular application. With the use of a standardized state management paradigm, NgRx is a framework of libraries that may help you organize and develop functionality for your application.An ngrx schematic is included in the @nrwl/angular package to help create files that follow best practises when using NgRx for state management. This design generates source files that improve NgRx's data persistence strategies and testing capabilities.

The following files make up the NgRx feature set that is generated by the ngrx schematic:

Selectors - composable functions that choose state components and update in response to input changes.
Effects- Handle unexpected effects to isolate UI elements from external interactions.
Reducer- Handles state changes resulting from dispatched actions and carries out state modifications in an immutable manner.
Facade- it is an optional class that offers more NgRx encapsulation from your component.
Actions - Throughout your application, express distinctive occurrences.

Initial Setup

The ngrx schematic is run with the following command:


    nx g @nrwl/angular:ngrx < featurename> --module=< path-to-module> 
        --no-interactive [options]

The most frequent optional selections are:

Root- Configure the basic Router-Store, Effects, NgRx Store, and Store DevTools NgModule imports.
facade - Not required. Add an injectable façade if you'd like to further isolate NgRx from your components. For more information, visit the blog Better State Management with Facades.

The example below demonstrates how to configure NgRx at the application's root.


    nx g @nrwl/angular:ngrx app --module=apps/< appname>/src/app/app.module.ts --root

The above command modifies the supplied module as follows:

Registers the state management function StoreModule.forRoot({}) in the imports array, with the recommended runtime checks turned on to maintain immutable actions and state.
Registers the isolation of side effects by registering EffectsModule.forRoot([]) in the imports array.
Registers StoreRouterConnectingModule.forRoot() for interaction with the Angular Router in the imports array.
Registers StoreDevtools.instrument() for integration with the Redux Devtools browser plugin in the imports array.

Feature Workflow

You want to handle the state from within a different library when developing new features using NgRx. This makes it simple to share your state with other libraries and applications. The workflow for using NgRx in the context of a library is described in the steps that follow.

The example that follows creates a library to launch a new feature. Products is utilised as the library name in this illustration.


    nx g @nrwl/angular:lib products

Monitoring of the feature state

Use the feature name in the ngrx schematic with the plural form, such as products.
A path to the products library module should be provided.


    nx g @nrwl/angular:ngrx products --module=libs/products/src/lib/products.module.ts 
    --directory+state/products --no-interactive

The below files are produced or updated:


    myorg/
    ├── apps/
    └── libs/
        └── products/
            └── src/
                ├── lib/
                │   ├── +state/
                │   │   ├── products.actions.ts
                │   │   ├── products.effects.ts
                │   │   ├── products.effects.spec.ts
                │   │   ├── products.facade.ts # optional
                │   │   ├── products.facade.spec.ts # optional
                │   │   ├── products.models.ts
                │   │   ├── products.reducer.ts
                │   │   ├── products.reducer.spec.ts
                │   │   ├── products.selectors.ts
                │   │   └── products.selectors.spec.ts
                │   ├── products.module.spec.ts
                │   └── products.module.ts
                └── index.ts

The changes made by the above command include:

Changes the feature module and adds the name of the feature state to the imports array to StoreModule.forFeature() registration.
The imports array and registers EffectsModule.forFeature() with the feature module.

The new public API for the state is exported using the feature library's barrel index.ts, which additionally includes:

The selectors for NgRx.
The feature reducer for NgRx.
The NgRx feature's elective facade class.

The topics we covered

The Nx workspace and application's initial configuration
NgRx's initial configuration for the application
Feature libraries creation

State management is the process of controlling user control states. It enables the creation of large-scale applications with robust data connectivity and good application performance.

Thanks for reading! We attempted to explain the “ State Management with NgRx” in this blog, and we hope that everyone will be able to understand what we were trying to say. Contact us if you need to familiarize more with NgRx concepts or have any problems in Angular.

Does your Project Demand Expert Assistance?