NGRX Store in Angular

Introduction

Angular is a popular framework for building complex and scalable web applications. Managing state in large Angular applications can be challenging; this is where NGRX comes in. NGRX is a popular library for managing conditions in Angular applications. It provides a powerful way to manage the state, which can be challenging in larger applications. This blog will go through the steps of using NGRX in an Angular application.

Installing NGRX

The first step in using NGRX is to install it in your Angular application. You can install NGRX using npm or yarn by running the following command:

npm install @ngrx/store

Creating a Store

A store is a container that holds the state of your application. To create a store in NGRX, you need to create a file that defines the initial state of your application and the actions that can be performed on the state.

Here is an example of creating a store in NGRX:

import { createStore, Store, Action } from '@ngrx/store';
export interface AppState {
  counter: number;
}
const initialState: AppState = {
  counter: 0
};
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export class Increment implements Action {
  readonly type = INCREMENT;
}
export class Decrement implements Action {
  readonly type = DECREMENT;
}
export type Actions = Increment | Decrement;
export function counterReducer(state = initialState, action: Actions) {
  switch (action.type) {
    case INCREMENT:
      return { counter: state.counter + 1 };
    case DECREMENT:
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}
export const store: Store<AppState> = createStore(counterReducer);

In this example, we have created a store with an initial state of counter as 0. We have also created two actions, Increment and Decrement, that can be performed on the state. The counterReducer function is responsible for updating the state based on the action that was performed. The createStore function is used to create a store with the counterReducer as its reducer.

Using the Store in Components

Once you have created a store, you can use it in your components to access and update the state. To use the store in your components, you need to import the store and the actions that you defined earlier.

Here is an example of using the store in a component:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState, Actions, Increment, Decrement } from './store';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Counter: {{counter}}</h1>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
   </div>
  `
})

export class AppComponent {
  counter: number;

constructor(private store: Store<AppState>) {
    this.store.select(state => state.counter).subscribe(counter => {
      this.counter = counter;
    });
  }
  increment() {
    this.store.dispatch(new Increment());
  }
  decrement() {
    this.store.dispatch(new Decrement());
  }
}

In this example, we are using the store.select method to select the counter property from the state. The store.select method returns an observable that we can subscribe to, and it will emit the updated value of counter whenever the state is updated.

We are also using the store.dispatch method to dispatch the Increment and Decrement actions to the store. This will update the state and the value counter will be updated accordingly.

Conclusion

NGRX is a powerful library for managing state in Angular applications. It provides a simple and intuitive way to manage the state, and it is especially useful for larger applications. In this blog, we have gone through the steps of using NGRX in an Angular application, including installing NGRX, creating a store, and using the store in components. By following these steps, you can easily manage the state of your Angular applications using NGRX.

Personal Portfolio Using Angular 8 and Bootstrap

How was my Frontend Engineer Interview Experience @ Amazon