NgRx — Strongly Typing the Actions

Photo by Nathan Anderson on Unsplash

Introduction

This is the third post on topic of NgRx. Previous two posts are available on the following links

• NgRx — Basics
• NgRx — Strongly Typing the State and Building Selectors

Today, we’ll cover how to strongly type our actions.

In NgRx world, its the action that makes the application go. When user click something, we kick-off an action. Need to load data, we kick-off an action. User updates a value and click save, we kick-off another action.

The result of the action is often a change of state.

But lets first see how our actions are currently setup

Staring Code

We’ve following places where actions are defined with strings

also in products-list.component as follows

without strong typing, it is very easy to make typing mistakes in those strings.

Lets see next how can we improve the situation.

Strong Typing Actions