NgRx in Angular with Example

NgRx is a redux pattern implementation in the Angular app which can be used mainly to pass data between the multiple components across different child-parent hierarchies and modules.

We can share the data between components in angular by

Inupt Output decorators
From the common service
Redux pattern design

The live demo of the app is available - https://ngrxapp.vercel.app/product

NgRx has five main entities through which the change propagation of data takes place.

Store - Its the database of the UI side which holds the whole data in the ‘state’ object
Action - Through this, the app interacts with ngRx and tells what to do, its also an object
Dispatch - This is nothing but the event which is triggered by the user
Reducer - It executes the pure functions based on the state and action params passed
Selecters - Through this, our component can listen to the new state from the store object
Effect - Handles the side effects of every action, such as API calls and dispatching another action to update different parts of the state.

NgRx follows the unidirectional data flow and the change propagation of events takes place from the component and is passed to the reducer. This is also called dispatched to the reducer.

Enter the following commands to download the Angular compatible libraries for the Angular app

$ npm install @ngrx/core
$ npm install @ngrx/store
$ npm install @ngrx/effects

Add in the imports of app.module.ts : StoreModule.forRoot(property:reducerName)

In this stage, we have to register the reducer to the particular property of the state.

Inside the constructor of the component, a store instance should be injected.

constructor(private store:Store<AppState>) {

}

To get the latest state from the store, we have to use the select method and assign the value to the local variable

constructor(private store:Store<AppState>) {
this.products = this.store.select(state => state.product)
}

An action should be dispatched to the reducer with the payload

addProduct(name: string, price: string) {
    console.log(name, price);
    this.store.dispatch({
      type: 'ADD_PRODUCT',
      payload: <Product>{
        name: name,
        price: price,
      },
    });
  }

A reducer should be defined to differentiate the type of action

export function addProductReducer(state: Product[]=[], action:any){
    switch (action.type) {
        case ADD_PRODUCT:
            return [...state, action.payload];
        default:
            return state;
    }
}

You can refer to the rest of the files for the template in the repo here - https://github.com/TheAjinkya/ngRxApp

Also, the live demo is available - https://ngrxapp.vercel.app/product

The product data which we add from the products page can also be viewed on the Home page which comes from a separate module at the child route level.

To access the same data, follow steps 2 and 3 mentioned above.

Thus, we can pass the data from different modules at different levels efficiently through ngRx pattern.

NgRx implementation in Angular 13

Comments

More from this blog

Inside the loop

The Parallel Universe

The safe space

Adulting the other way round

Observe the observer

NgRx in Angular with Example

Command Palette

Comments

More from this blog

NgRx in Angular with Example