NgRx Data and json server mock services

NgRx Data by John Papa and json-server

For anyone who started implementing ngrx state, store, entities management, we know that this can be a long way to have a clean and maintainable code. What is called the boilerplate is the minimal amount of code to handle properly the basic operations like subscribing to a centralized state, store or data service.

Go check the next step with Spring Boot here : https://medium.com/@coco.boudard/spring-boot-data-and-angular-ngrx-data-cbed33fc6015

NgRx boilerplate

This code includes elements like :

  • Actions definitions, classes and inner types as constants
  • Reducers, plain functions with often switch case logic to handle requests of actions. For example : ADD_TODO Action with a Todo object payload.
  • Application State as a class
  • Effects to isolate specific code from the Components
  • Declaration of reducers in the app module or via a feature module
  • Selecting elements from the store retreiving Observables
  • Subscribe if needed to the Observables and work with the data itself or display the async data they provide.

That can quickly become tedious, and we need to be very cautious (that’s 2 words with “ious” there).

Among the components of NgRx, there is one that’s worth mentioning here : entities. This is a nice abstraction when working with … entities, yeah, data or services like we all do, don’t we ?

  • NgRx Entity : a clean way to handle collections operations with normalized syntax like addOne

NgRx Data by John Papa & Ward Bell

The motivation for learning this one, very simple :

“ Want to learn how to use NgRx without all of the boilerplate?”

This library will handle almost everything for you when requesting a classic services API. You can find all details in the demo App. I will present here a very simple solution based on Angular-Cli and json-server mock database.

npm i @ngrx/effects @ngrx/entity @ngrx/store @ngrx/store-devtools ngrx-data

The lab example app is nice but it’s a little bit complex, since it uses the in-memory database api from angular-cli.

Our application

We want to run a simple(est) app with a Todo model. The id is optional here because we want to insert Objects in json-server without this field.

export interface Todo {
id?: number;
titre: string;
}

We will have only 2 technical folders /services and /store.

ng g m store/app-store --flat -m app
ng g m store/entity-store --flat -m store/app-store
ng g m services/services --flat -m app
ng g s services/todos --flat -m services

For the content of these files, just follow the instructions, here are mine :

entity-store.module.ts
todos.service.ts

Server configuration

Since we run on Angular-cli, we have a default HTTP port 4200. The json-server runs on any port you like, but certainly different from 4200. We need to use the Angular-cli proxy configuration to tell webpack how to handle requests to the api with a root proxy.conf.json file :

// proxy.conf.json
{
"/api": {
"target": "http://localhost:3004",
"secure": false
}
}

Now you can start your Angular-cli with proxy option :

// package.json
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json",

Component usage

The best part now is how to use the NgRx Data lib in our component, and this will be as simple as if you had a simple Observable based service with no Redux stack involved :

app.component.ts

This is that simple ! Now there is still an issue, we need to configure json-server to handle properly the default requests from NgRx Data :

  • Default url for services are /api
  • Default routes for a single “Todo” model will be /todos GET for getAll() but /todo/:id for DELETE or /todo for a POST request.

json-server configuration

And then we just add a routes.json file next to our database file with the two issues mentioned :

// routes.json
{
"/api/*": "/$1",
"/todo/*": "/todos/$1"
}

And you start you json-server this way :

// package.json
"scripts": {
"dbmock": "json-server --watch src/server.json --port 3004 --routes src/routes.json"

You can check that it dis start correctly in the terminal :

running json-server with custom routes

Now we can call our API in the component very simply for CRUD operations :

NgRx Data calls in Angular component

Next step with Spring Boot : https://medium.com/@coco.boudard/spring-boot-data-and-angular-ngrx-data-cbed33fc6015

More information

Credits