Saving, Deleting, and Updating with NgRx

In the previous chapter, we learned about the concepts and features of NgRx. We learned the importance of state management as it provides a single source for the application to have a unidirectional data flow and reduces the responsibility of components. We also learned the building blocks of NgRx, which are actions, effects, reducers, and selectors. Lastly, we implemented the getting and displaying of the anti-heroes list feature using NgRx in our application.

In this chapter, we will now complete our application’s missing features – saving, deleting, and updating data by still using NgRx.

In this chapter, we will cover the following topics:

• Removing an item without side effects using NgRx
• Removing an item with side effects using NgRx
• Adding an item with side effects using NgRx
• Updating an item with side effects using NgRx

Technical requirements

The link to the finished version of the code is https://github.com/PacktPublishing/Spring-Boot-and-Angular/tree/main/Chapter-13/superheroes.

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...

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...

Adding an item with side effects using NgRx

In this section, we will implement the add functionality with side effects in NgRx. The steps are similar to how we implemented the delete feature. We will create the building blocks step by step and create the dispatch logic in our component.

Creating the actions

The first step we need to do is create the required action types and actions for our add feature. To implement the actions, we can think of how we created the actions for the delete feature.

The concept is the same. There are two action types that we need to create, and these are ADD_ANTI_HERO_API and ADD_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 adding the newly created data.

After creating the two action types, we also need to create an action using the createAction() function for the ADD_ANTI_HERO_STATE type. The effect will dispatch this once the...

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...

Summary

With this, we have reached the end of this chapter. Let’s have a recap of the valuable things we have learned; we have completed the CRUD features of applications using the building blocks of NgRx, and we have learned the difference between using and not using side effects in state management. Side effects are essential for our changes in the store to be synced with the database.

We have also learned, step by step, how to create the building blocks of NgRx with the different actions we need for our application.

In the next chapter, we will learn how to apply security features in Angular, such as adding user login and logout, retrieving user profile information, protecting application routes, and calling an API with protected endpoints.