ngrx in Angular

ngrx 

npm i @ngrx/store --save

https://ngrx.io/guide/schematics

npm install @ngrx/{store,effects,entity,store-devtools} --save

npm i  @ngrx/schematics -g 

ng add @ngrx/schematics

1.store

ng generate store State  --root --module app.module.ts

2.Action 

ng generate action User

3.Reducere 

ng generate reducer  User --reducers reducers/index.ts

4.Selector 

ng generate selector  User

5.Selector 

ng generate effect   User --root -m app.module.ts

===============Action

import { IUser } from './interfaces/users';

import { Action } from '@ngrx/store';

export enum UserActionTypes {

  LoadUsers = '[User] Load Users',

  LoadUsersSuccess = '[User] Load Users Success',

  LoadUsersFailure = '[User] Load Users Failure',

}

export class LoadUsers implements Action {

  readonly type = UserActionTypes.LoadUsers;

}

export class LoadUsersSuccess implements Action {

  readonly type = UserActionTypes.LoadUsersSuccess;

  constructor(public payload: { data: IUser[] }) { }

}

export class LoadUsersFailure implements Action {

  readonly type = UserActionTypes.LoadUsersFailure;

  constructor(public payload: { error: String }) { }

}

export type UserActions = LoadUsers | LoadUsersSuccess | LoadUsersFailure;

=====reducer

import { IUser } from './interfaces/users';

import { Action } from '@ngrx/store';

import { UserActions, UserActionTypes } from './user.actions';

export const userFeatureKey = 'userState';

export interface State {

  users: IUser[],

  error: String

}

export const initialState: State = {

  users: [],

  error: ''

};

export function reducer(state = initialState, action: Action): State {

// export function reducer(state = initialState, action: UserActions): State {

  switch (action.type) {

    case UserActionTypes.LoadUsers:

      return {

        ...state

      }

      case UserActionTypes.LoadUsersSuccess:

      return {

        ...state,

        // users:action.payload.data,

        error:''

      }

      case UserActionTypes.LoadUsersFailure:

      return {

        ...state,

        

        users:[],

        // error:action.payload.error,

      }

    default:

      return state;

  }

}

=====selector

import { createFeatureSelector, createSelector } from '@ngrx/store';

import { State } from "./user.reducer";

const getUserFeaturestate=createFeatureSelector<State>('userState');

export const getUser=createSelector(

    getUserFeaturestate,

    state =>state.users

)

export const getError=createSelector(

    getUserFeaturestate,

    state =>state.error

)

====effect

import { GlobalService } from 'src/app/services/global.service';

import { Injectable } from '@angular/core';

import { Actions, Effect, ofType } from '@ngrx/effects';

import { Observable, of } from "rxjs";

import { Action } from "@ngrx/store";

import * as userActions from "./user.actions";

import { mergeMap, map, catchError } from "rxjs/operators";

@Injectable()

export class UserEffects {

  constructor(private actions$: Actions, private gbls: GlobalService) { }

  GET_ADM_SIGNUP_INFO() {

    var parms = {

      Index:   1,

      Count:100

    } 

    return  this.gbls.GET_ADM_SIGNUP_INFO(parms) ;      

  } 

  @Effect()

  loadUsers$:Observable<Action> = this.actions$.pipe(

    ofType(userActions.UserActionTypes.LoadUsers),

    mergeMap(

      action => this.GET_ADM_SIGNUP_INFO().pipe(

        map(users=>(new userActions.LoadUsersSuccess({data:users}))),

        catchError(err=>of(new userActions.LoadUsersFailure({error:err})))

      )

    )

  )

}

===selector

import { createFeatureSelector, createSelector } from '@ngrx/store';

import { State } from "./user.reducer";

const getUserFeaturestate=createFeatureSelector<State>('userState');

export const getUser=createSelector(

    getUserFeaturestate,

    state =>state.users

)

export const getError=createSelector(

    getUserFeaturestate,

    state =>state.error

)

==========Use In Component

import { Store, select } from '@ngrx/store';

import * as UserActions from "../../user.actions";

import * as fromUser from "../../user.selectors";

constructor(  private store: Store  ) { }

  ngOnInit(): void {

      

    this.store.dispatch(new UserActions.LoadUsers()) //action dispatch 

    this.store.pipe(select(fromUser.getUser)).subscribe(users => {

      console.log(">>>>User", users);

    })

    this.store.pipe(select(fromUser.getError)).subscribe(error => {

      console.error(">>>>User Error", error);

    })

  }