Removing an item without a side effect using NgRx

In this section, we will first see how to delete items without using side effects in NgRx. As we learned in the previous chapter, side effects are used to call external APIs to retrieve data. This means that without using effects, we will delete the data by dispatching an action to invoke a reducer base on the dispatched type. This section will help us see the difference in the flow and behavior of using effects in the application.

Creating the delete action

The first step is to create the action for the delete feature. In our project, in the anti-hero/state/anti-hero.actions.ts file, we will add a new action interface and a new function for deletion.

Let’s have a look at the implementation of the following code:

export enum AntiHeroActions {
  GET_ANTI_HERO_LIST = '[Anti-Hero] Get Anti-Hero list',
  SET_ANTI_HERO_LIST = '[Anti-Hero] Set Anti-Hero list',
  REMOVE_ANTI_HERO_STATE...