Removing an item with side effects using NgRx

In this section, we will improve the delete functionality by adding effects in our state. Our current delete feature only removes the data in the store but does not sync the changes in the database. This means that if we refresh our application, the data that we have deleted will be available again.

To sync the changes in the database, what we should do is create an effect that will invoke the delete API. Let’s have a look at the step-by-step changes in our code in the following sections.

Creating a new action type

The first step we need to do is create a new action type. The effects in NgRx will use the new action type for deleting feature later.

We will add REMOVE_ANTI_HERO_API in the AntiHeroActions enum under the anti-hero/state/anti-hero.actions.ts file.

Let’s have a look at the added action in the following code:

export enum AntiHeroActions {
  GET_ANTI_HERO_LIST = '[Anti-Hero] Get Anti...