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

In this guide, we just focus on how to build a CRUD application with Angular (version 8) that has already installed the Ngrx, not on setting up an Angular application or installing the Ngrx library. You can follow the following guides to do those task:

• Set up an Angular application: https://codeburst.io/how-to-build-an-angular-app-with-angular-cli-in-a-couple-of-minutes-43089d3ab272
• Install the Ngrx library: https://ngrx.io/guide/store/install

If you have no idea what is Ngrx, I recommend you to read this to explore more about it. And if you have a basic knowledge of Redux, I think you will be easy to approach this library.

In this part, we will learn how to define actions, reducer, selectors and build a page to display all items that are selected from the store using the Ngrx.

In almost any application that we work with, we all encounter operations such as retrieving data, rendering it as a table view, create/update or delete a row on that view. And this data which is stored on the server is dealt with by the usage of HTTP requests (GET, POST, etc).

The first thing we need to do in here is where the data is stored that we will get through an HTTP API request. Because this article does not focus on this, I will use a fake backend server for mock. There are different ways to use a fake back-end server are:

• Use Angular In-Memory-Web-API
• Create a local JSON file and use it
• Or hard-code the data, and return this data.

But I have another easy way, say big thanks to https://getsandbox.com. Just provide some rows of code, we already have a RESTful API for mock or testing. I have created a mock RESTful API on https://getsandbox.com for CRUD on the Entity object as below:

Fake RESTful APIs: (CRUD)
GET:    https://entity.getsandbox.com/entities/     (Get all)
GET:    https://entity.getsandbox.com/entities/{id} (Get one)
POST:   https://entity.getsandbox.com/entities/     (Create)
PUT:    https://entity.getsandbox.com/entities/{id} (Update)
DELETE: https://entity.getsandbox.com/entities/{id} (Delete)

Ok, we have done on prerequisite items. Next, we’ll go together to define actions, reducer, and selectors to fetch Entity objects from the fake server I have created before and store it into the Ngrx store. If you have developed with a React Redux application before, all fundamental principles about Redux (action, reducer, selector, etc) will be similar to the Ngrx.

First, we will define a class that describes all properties of the Entity object we will deal with:

entity.ts

Let’s define some actions for loading entities as:

entity.action.ts

Next, we’ll define the Entity’s reducer. Here, we have to define an initial state and specify how the state is changed for each action is sent to the store.

entity.reducer.ts

Continue define selectors:

entity.selectors.ts

Create a service file to fetch data from the server:

entity.service.ts

To read data from the server, we need to create a side effect to make an HTTP request to the server and store data into the store through Ngrx actions. With React, Saga can handle side effects for us. And the Ngrx also has provided the Effect concept that is the same as the Saga. As the Ngrx documentation: “Effects are an RxJS powered side effect model for Store. Effects use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages and time-based events.” So that we will use it for reading Entity data from the server.

entity.effect.ts

Finally, creating an Angular page (with route is “/entities”) to display a list of the entity that are fetched from the server. For easy to navigate to entities page, we create a link for quick navigation in app.component.html:

app.component.html

In entities.page.ts, the store will dispatch loadEntities action and the effect will be triggered to fetch data from server and store data into the store. Since the data is loaded to the store, we only get data from the store and display it.

entities.page.ts

The entity template HTML file:

entities.page.html

Note: Ensure that you have already imported CommonModule to use the async pipe.

Gives the result as:

Reading Entity data from the server

The operation for reading Entity data from the server has completed. But you will see the entities page display empty page before render list of Entity objects. This is cause of waiting from the server for reading data and it should be better for the user’s experience if a spinner display instead of. That is a good suggestion since I know Angular Resolve. Resolve will wait for the data to be resolved before the page is finally navigated.

So I will define the resolver for entities page as below:

entities.resolver.ts

As above code, the entities page only is activated if the loaded flag is true. Also, I have added a filter operator to dispatch loadEntities action if the loaded flag is false. So the application only makes an HTTP request only the loaded flag is false, this reduces significantly backend traffic during the application navigation.

Update the entities.page.ts to comment or remove the following code:

// this.store.dispatch(fromEntityActions.loadEntities());

Continue to add the resolve to the route configuration:

entity.route.ts

Enjoy the result:

Summary

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

• Use https://getsandbox.com/ to quick create a fake server for mocking and testing.
• Use createAction, createReducer, and createFeatureSelector for creating actions, reducer, selectors.
• Use Ngrx Effect for handle side effects to make an HTTP call for retrieving data from the server.
• Use Angular Resolver to ensure that data has already loaded before the page is navigated.

I hope this tutorial will be helpful to you :D