State Management Using NgRX In Angular


In this post we will learn about State Management using NgRX in Angular.

About NgRx

NgRx Store provides reactive state management for Angular apps inspired by Redux. Unify the events in your application and derive state using RxJS.

Elements of NgRx

NgRx has the below components/elements. Understanding the below components help to implement the state management. 
  • Actions - Actions are events thats triggered from components.
  • Reducers - Reducers handles the state management.
  • Selectors - Selects are functions used to select, derive and compose the states.
  • Effects - Actions can interact with effects and get the data from server(mostly using services).


We need to create "store" and all the NgRX component folders, like Actions, Reducers, Selectors, Effects. Create a "employee.actions.ts" file and the below "GetEmployees" action. (Full code will be available at the end). 
  1. export class GetEmployees implements Action {  
  2.   readonly type = GET_EMPLOYEES;  
  3. }  


Create a reducer with "EmployeeState" and the switch case to handler "GetEmployees" action result. 
  1. export interface EmployeeState {  
  2.   employees: Employee[];  
  3.   employee: Employee;  
  4.   loading: boolean;  
  5.   error: boolean;  
  6. }   
  1. case EmployeeActions.GET_EMPLOYEES: {  
  2.       return { ...state, loading: true };  
  3.     }  


Next we will create "employees.selectors.ts" file and the below code will render object's state to component. 
  1. @Injectable()  
  2. export class EmployeeSelectors {  
  4.   constructor(private store: Store<EntityState>) {}  
  6.   employees$ =;  
  7.   employee$ =;  
  8.   employeeState$ =;  
  9.   loading$ =;  
  11. }  


We need to add the below "Effect" method to get the employee data from "employeeDataService" and do the mapping after success or failure.
  1. @Effect()  
  2.    getEmployee$: Observable<Action> = this.actions$  
  3.      .pipe(  
  4.        ofType(EmployeeActions.GET_EMPLOYEE),  
  5.        switchMap((action: GetEmployeeAction) =>  
  6.          toAction(  
  7.            this.employeeDataService.getEmployee(action.payload),  
  8.            EmployeeActions.GetEmployeeSuccess,  
  9.            EmployeeActions.GetEmployeeError  
  10.          )  
  11.        )  
  12.      );  

Component code changes

In the "employee" component we have injected the "Store", "EmployeeSelectors" object. 
  1. constructor(  
  2.      private store: Store<EntityState>,  
  3.      private employeeSelectors: EmployeeSelectors) {  
  4.      this.employees$ = this.employeeSelectors.employees$;  
  5.      this.loading$ = this.employeeSelectors.loading$;  
  6.  }  
In "getEmployees" method, we need to dispatch the "GetEmployees" event which we created in "EmployeeAction".
  1. getEmployees() {  
  2.    console.log('Inside test');  
  3. GetEmployees());  
  4.  }  
Let's run the application and see the results,
Employee data are loaded on the page load,
I clicked the edit link and Edit page got loaded.
After submitting the page, updated data is reflected in employee list page.


In this post we learned about state management using Angular -NgRX. The source code will be available in this GitHub Repository.