State Management Using NgRX In Angular

Introduction

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

Actions

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

export class GetEmployees implements Action {
readonly type = GET_EMPLOYEES;
}

Reducers

Create a reducer with "EmployeeState" and the switch case to handler "GetEmployees" action result.

export interface EmployeeState {
employees: Employee[];
employee: Employee;
loading: boolean;
error: boolean;
}

case EmployeeActions.GET_EMPLOYEES: {
return { ...state, loading: true };
}

Selectors

Next we will create "employees.selectors.ts" file and the below code will render object's state to component.

@Injectable()
export class EmployeeSelectors {
constructor(private store: Store<EntityState>) {}
employees$ = this.store.pipe(select(getAllEmployees));
employee$ = this.store.pipe(select(getEmployee));
employeeState$ = this.store.pipe(select(getEmployeeState));
loading$ = this.store.pipe(select(getEmployeesLoading));
}

Effects

We need to add the below "Effect" method to get the employee data from "employeeDataService" and do the mapping after success or failure.

@Effect()
getEmployee$: Observable<Action> = this.actions$
.pipe(
ofType(EmployeeActions.GET_EMPLOYEE),
switchMap((action: GetEmployeeAction) =>
toAction(
this.employeeDataService.getEmployee(action.payload),
EmployeeActions.GetEmployeeSuccess,
EmployeeActions.GetEmployeeError
)
)
);

Component code changes

In the "employee" component we have injected the "Store", "EmployeeSelectors" object.

constructor(
private store: Store<EntityState>,
private employeeSelectors: EmployeeSelectors) {
this.employees$ = this.employeeSelectors.employees$;
this.loading$ = this.employeeSelectors.loading$;
}

In "getEmployees" method, we need to dispatch the "GetEmployees" event which we created in "EmployeeAction".

getEmployees() {
console.log('Inside test');
this.store.dispatch(new GetEmployees());
}

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.

Summary

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