Angular 18 state management using NGRX - Store, Reducer, Effects, Selectors | NgRx tutorial in Hindi

Introduction

This tutorial will guide you through state management in Angular applications using NgRx. NgRx is a powerful library that helps manage the state of your application in a predictable way. This guide is based on a video tutorial that covers everything from installation to advanced concepts like selectors and effects.

Step 1: Understand NgRx

• What is NgRx?

  • NgRx is a reactive state management library for Angular applications, which is based on the Redux pattern.
  • It helps in managing global state, making the application more predictable and easier to test.

• Why Use NgRx?

  • Centralized state management.
  • Improved maintainability and scalability of applications.
  • Enhanced performance with selective data updates.

Step 2: Set Up Your Project

• Create a New Angular Project

  • Use Angular CLI to create a new project:

    ng new my-ngrx-app
    cd my-ngrx-app
    

• Install NgRx

  • Install the NgRx store and its dependencies:

    ng add @ngrx/store @ngrx/store-devtools @ngrx/effects @ngrx/entity
    

Step 3: Configure NgRx in Your Application

• Add Store Module

  • Import StoreModule in your AppModule:

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

• Create a Reducers File

  • Create a reducers.ts file in your store folder and define your reducers.

Step 4: Select Data from the Store

• Using Selectors
  • Create selectors to extract data from the store:

    import { createSelector } from '@ngrx/store';
    
    export const selectFeature = (state) => state.feature;
    
    export const selectData = createSelector(
      selectFeature,
      (featureState) => featureState.data
    );
    

Step 5: Define Actions in NgRx

• Create Action Types

  • Define action types for your application:

    export const ADD_ITEM = '[Feature] Add Item';
    export const REMOVE_ITEM = '[Feature] Remove Item';
    

• Create Action Creators

  • Create actions using createAction:

    import { createAction, props } from '@ngrx/store';
    
    export const addItem = createAction(ADD_ITEM, props<{ item: string }>());
    export const removeItem = createAction(REMOVE_ITEM, props<{ id: number }>());
    

Step 6: Create Reducers

• Implement Reducers
  • Create a reducer function that handles state changes:

    import { createReducer, on } from '@ngrx/store';
    import { addItem, removeItem } from './actions';
    
    export const initialState = { items: [] };
    
    const featureReducer = createReducer(
      initialState,
      on(addItem, (state, { item }) => ({
        ...state,
        items: [...state.items, item],
      })),
      on(removeItem, (state, { id }) => ({
        ...state,
        items: state.items.filter((_, index) => index !== id),
      }))
    );
    
    export function reducer(state, action) {
      return featureReducer(state, action);
    }
    

Step 7: Use Selectors

• Access State in Components
  • Use selectors in your components to access the state:

    import { Store } from '@ngrx/store';
    
    constructor(private store: Store<State>) {}
    
    ngOnInit() {
      this.store.select(selectData).subscribe(data => {
        console.log(data);
      });
    }
    

Step 8: Implement Effects

• Create Effects
  • Define side effects using @ngrx/effects:

    import { Injectable } from '@angular/core';
    import { Actions, createEffect, ofType } from '@ngrx/effects';
    import { addItem } from './actions';
    
    @Injectable()
    export class AppEffects {
      addItem$ = createEffect(() => this.actions$.pipe(
        ofType(addItem),
        // Handle side effect here
      ));
    
      constructor(private actions$: Actions) {}
    }
    

Conclusion

You’ve now learned how to manage state in your Angular application using NgRx. Key steps included understanding NgRx, setting up your project, configuring the store, defining actions and reducers, and implementing effects. For further exploration, consider building more complex state interactions or integrating NgRx with other libraries in your Angular application. Happy coding!