Ngrx practice on Angular Project

[reboottime]

Overview

About: This article navigates Angular state management using Ngrx.

Ngrx is a strongly opinionated global and local state management solution for angular application.

[reboottime]

Rationale

Vs

Redux diagram

[reboottime]

Example variations

• Example without external interaction , (.ie, http request) sample code pattern
• Example with external interaction
  • The example placed the API request inside of app.component.ts
  • Instead of following redux thunk pattern

[reboottime]

State level

angular supports generate feature state using cli

In NgRx, StoreModule.forRoot() and StoreModule.forFeature() are methods to configure state management for an Angular application, each serving distinct purposes

1. StoreModule.forRoot():

   • to set up the root application state. It should be called only once in your application, typically in the AppModule.

   • configures the global state for your application and initializes the top-level state slices.

   • The first argument to forRoot() is the initial state of the application, and the second argument is a configuration object (optional).

   • Example usage:

     import { StoreModule } from '@ngrx/store';
     
     @NgModule({
       imports: [
         // ...
         StoreModule.forRoot({ /* initial state */ }),
         // ...
       ],
       // ...
     })
     export class AppModule { }

2. StoreModule.forFeature():

   • Tto set up feature modules. Feature modules are used to organize the state of specific features or parts of your application.

   • Called once for each feature module and allows you to add additional state slices to your application.

   • Example usage:

     import { StoreModule } from '@ngrx/store';
     
     @NgModule({
       imports: [
         // ...
         StoreModule.forFeature('featureName', /* feature reducer */),
         // ...
       ],
       // ...
     })
     export class FeatureModule { }

   • In the above example, 'featureName' is a unique string identifier for this feature module, and /* feature reducer */ is the reducer function for this feature's state slice.

   • You can use createFeatureSelector and createSelector to access the state of the feature module.

3. When to Use Each:

   • forRoot: Use this in the root module of your application (typically AppModule) to set up the global state for your application. It initializes the top-level state slices and should only be called once.

   • forFeature: Use this in feature modules to add additional state slices. Feature modules are typically used to manage the state for specific parts of your application. You can call forFeature multiple times to set up state for different features.

In summary, forRoot is used in the root module to configure the global application state, while forFeature is used in feature modules to manage specific parts of the application's state. This helps in organizing and modularizing the state management in NgRx applications.