Updating an item with a side effect using NgRx

In this last section, we will implement the final missing feature, which is the update functionality, where we will create the building blocks step by step and the dispatch logic in our component as we did for the add and delete features.

Creating the actions

The first step we need to do is to create the required action types and actions for our update feature. We will first create the two action types we need, which are MODIFY_ANTI_HERO_API and MODIFY_ANTI_HERO_STATE. The first type will be used by the effect that will call the API, and the second type will be used by the reducer that will modify the state by changing the data based on the new anti-hero object.

After creating the two action types, we also need to create an action using the createAction() function for the MODIFY_ANTI_HERO_STATE type. The effect will dispatch this once the API has been successfully called.

Let’s have a look at the following code implementation...