Building a CRUD application with Angular using Ngrx (Part 2)

In the previous part, I have shown how to build a sample mockup API for CRUD application as well as build a sample list page. In this part, we will continue to build CRUD application on creating, updating and deleting an entity using Ngrx.

Before continuing, I want to introduce to you a special thing is “Optimistic UI”.

What is Optimistic UI?

Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result ~ Apollo.

Let’s remember the previous approach for handling update operation (I call this approach is Synchronous UI):

• The end-user click update action.
• The end-user click update action.
• Make an HTTP request for the update operation.
• Displays a spinner (or loading image) for waiting for the success response from the server.
• After the server responses successfully, we continue to refresh data on UI to reflect with the updated result for consistency. Otherwise failed, display an error message.

And if we apply the Optimistic UI approach:

• The end-user click update action.
• Make an HTTP request for updating operation and the UI value is updated immediately assuming the response will be successful.
• After the server responses successfully, we do not anything. Otherwise failed, revert the UI value as the previous state.

As you see two above approaches, the Synchronous UI approach needs a step that showing a spinner for waiting for the server’s response and the UI just is updated after the server is responded. In most cases, there is no reason to wait for a successful response when we assume that all requests are expected to be successful. Like that, the Optimistic UI approach brings to the end-user a faster user experience, more smooth and stable.

Now, we will go dive to implement CRUD application with optimistic interaction.

As part 1, we have built the CRUD application to read Entity from the server and display it using Ngrx. Before we implement the update Entity feature, we need update code for some files as preparation.

Update the entity.service.ts file as:

entity.service.ts

Update entities.page.html to add some action links:

entities.page.html

Update Entity

First, we update entity.actions.ts file to add some actions as:

entity.actions.ts

Next, update the entity.reducer.ts file as:

entity.reducer.ts

Update the entity.effects.ts file as:

entity.effect.ts

And update the entity.selectors.ts file as:

entity.selectors.ts

As you can see above the action file, we define an additional action is “Load Entity” for reading Entity detail from the server or the available store and display it for the user to edit. If you click edit on List of Entities page, just load data from the store that is loaded before. In case the user pastes the editing Entity page URL direct to the browser’s address, an HTTP request will be called to retrieving Entity detail instead of.

In the reducer file, you will see the “updateEntity” action will update immediately the state reflects with the updated entity even the server does not respond yet. And we need an action to revert the store to the previous state for case unsuccessful response. I used ngrx-undo to handle this case, the ngrx-undo provides a wrapper function to revert a specified action with the simple configuration, you can see I have used this library in the entity.effects.ts file for error handling section. To install this library you can refer to this link.

Ok, we will develop a page for Entity editing as below:

entity.page.ts

entity.page.html

entity.resolver.ts

And don’t forget to define the route for Entity editing page:

{
    path: "edit/:id",
    component: EntityPage,
    resolve: {
        entity: EntityResolver
    }
}

Gives the result as:

Entities page

Entity editing page

Create an Entity

Now to create the Entity in the server, we need to perform HTTP POST operation and pass the data that needs to be inserted. We will take a “createEntity” action for that.

entity.actions.ts

Update reducer and effect files to add some code as below:

entity.reducer.ts

entity.effect.ts

And we can reuse the Entity editing page for creation operation, update code the entity.page.ts file as below:

entity.page.ts

Delete Entity

Similarly, we only need to define “deleteEntity” action and call the action on the delete method that we have added before:

entity.actions.ts

entity.reducer.ts

entity.effects.ts

Implement the delete method as below:

entities.page.ts

Done, enjoy the result as below:

Summary

Coming to the end of this guide, let us have a quick recap of what we did.

• Use Optimistic UI approach to make the application faster and smoother.
• Use the ngrx-undo library for reverting the store as the previous state on the unsuccessful response case.

Thank for reading!