Angular and Redux — Part 2

Find Part 1 of this tutorial series here.

In my previous article Angular + Redux -Part 1, I discussed the core concepts related to State management. Hope now you have some clear idea what actions, reducers, and store stands for, if not you can refer to it from here.

Here we will create an angular application for Managing Employees, which will have the functionality of adding, deleting and filtering employees.

There are two libraries you can use with angular for state management.

• @angular-redux — integration of Redux library into your Angular
• @ngrx — implementation of Redux store from the ground up.

For this example, we will be sticking with the @angular-redux library.

Okay, Let’s start coding !!!

First, create an angular application using the cli.

As the next step install angular-redux module for the state management.

Install @angular-redux

npm install redux @angular-redux/store

Structure of my app would be as follows

application structure

Define Actions

Actions are simply objects which carries information regarding what happened in your application.

1. Create a model class for employee

employee.ts

2. Create a service app.action.ts to define the employee actions and define AddEmployee action

Add Employee Action

AddEmployeeAction has implemented the AnyAction interface which will have type property to indicate the action being performed and also allow you to have additional properties to indicate the payload. Besides that, you can decide the structure of it. In this case, it will have another property holding the employee details.

3. Add the action to handle deleting an employee.

Delete Employee Action

Here instead of returning the whole employee object, we are returning the employee id together with the type property.

4. Define the final action for Setting the employee filter

Employee Filter Action

We have declared an enum for the options in employee filter and it is passed to the SetEmployeeFilter action as a parameter.

This is how employee.action.ts looks like after adding all the actions

employee.action.ts

Design App State

In Redux, the state of the application will be kept in a single object. Therefore before defining reducers, we have to think of the structure of our app state.

For our employee management app, we want to store two different things:

• The list of employees.
• The selected employee filter option

1. Define an interface

app.store.ts

Here we have defined an interface with properties to store the list of employees and filter option value.

2. Define the initial state of the app.

initial state

As the next step, we have defined the initial state of our app, with the values each property would hold when the app is being launched. In our case,

• employee list is set to null
• filter option is set as AllEmployees

Define Reducers

We have initialized our app state so let's define the reducer now. Reducers will listen to the actions dispatched from the app and update the state based on the type of action.

Simply a reducer function will have two arguments

• The current state of the app
• An action object representing the event happened in the app

1. Define the reducer function

For the first time when the reducer function is called state is passed as undefined, there we have to return our initial state of the app.

Here we pass the INITIAL_STATE as the default value of the state argument. So when the state is passed as undefined for the first time, it will use the initial state of the app.

2. Handle SET_EMPLOYEE_FILTER

Now let’s handle Setting the employee filter option. Here all we have to do is set the filter option value in the state.

What you should keep it in mind here is, we don’t mutate the current state of the app. We just create a copy of the current state using Object.assign() and set the filterOption value in that copied state, rather than updating the current state of the app. You can read more here, about how Object.assign() work.

Another point you should keep in mind is you must return the previous state of the app for unknown type of actions.

3. Handle ADD_EMPLOYEE

Now let’s handle Adding a new employee scenario

Here we take the existing list of employees and then concat it with the new employee object and assign it back to the state while without manipulating the current state.

4. Handle DELETE_EMPLOYEE

Employees whose id is not equal with the employee id to be deleted will be assigned back to the employee property in the state.

This is how the app.store.ts will look like after defining the app state and reducer.

Configure the Store

As the next step, we will be configuring the store with our application. Import NgReduxModule, NgRedux into your app module and include NgReduxModule under the imports array.

Then in the constructor of your module, configure the store using configureStore method passing the reducer and the initial state of the app as parameters.

Implement app features

Now our store is configured and ready to use :)

Let’s now implement the features of adding, deleting and filtering employees.

1. Employee component

This will be used as the template to display employee data as well as to delete a selected employee.

employee.component.html

On delete button click we need to notify the store that an employee needs to be deleted as well as the employee needs to be deleted.

By using the ngRedux.dispatch() event in the redux we announced that DELETE_EMPLOYEE event is triggered for the selected employee.

employee.component.ts

2. Add Employee Component

This component will let you add a new employee

add-employee.component.html

Same as during deletion when adding employee button is clicked we have to dispatch an event to the store with the new employee to be added.

add-employee.component.ts

3. Employee Filter Component

This component will allow you to filter all employees, permanent employees and temporary employees

employee-filter.component.html

During the component initialization, we get the value of the filterOption from our store using ngRedux.getState().filterOption and bind it to the UI. Once the filter is changed then the new option will be dispatched to the store as well.

employee-filter.component.ts

4. Employee List Component

Okay now we have defined the functionality for adding, deleting and filtering employees, lets now try to access the employees from the store and display it in the view.

employee-list.component.html

angular-redux store exposes a decorator named @select() which allows you to directly access the properties in your state. Here I have access both employees and filterOption properties and then have subscribed to them so that whenever these properties are changed store will notify the component.

Whenever an employee is added or deleted store will pass the updated employee list to this component and it will update the property which is bind to the UI.

In a similar way when the employee filter option is changed it will pass the latest filter option and based on that value the employee list will get filtered and updated back in the UI.

employee-list.component.ts

Each time you are subscribing to state property, make sure that subscription is assigned to a variable and you unsubscribe it when the component is getting destroyed.

5. Integrate the components

As the last step integrate add employee, employee filter and employee list components in the app component

app.component.html

And that’s it. I hope this example helped you to get a clear understanding of how to implement the redux store in your angular application.

You can find the complete code example here.