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

1. 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.

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

constructor(private store:Store<AppState>) {

}

1. 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)
}

1. 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,
      },
    });
  }

1. 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.