How to Write Effects for Actions in NgRx Data

Starting with a framework solves many problems; some of them are very hard to learn from the very beginning. However, we can even build many things faster than in a [vanilla](https://en.wikipedia.org/wiki/Vanilla_software) mode. In fact, I almost used [NgRx Data](https://ngrx.io/guide/data) before [NgRx](https://ngrx.io/).

Now, I am going to tell you about my experience with a problem — I couldn’t figure out a solution for a long time.

But before that, we will also learn how to:

Create a dummy project in NgRx Data, and
customize the URL in NgRx data.

To finally see how to intercept native NgRx data actions-request for firing effects.

Introduction

The Angular and NGRX teams have done magnificent work; however, you know that docs sometimes…

Anyways, the truth is that NgRx data makes the hard job of[CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) communication that going through the back-end. We save a lot of time and effort, but at a price. It is normalization in [REST](https://medium.com/@stevenpcurtis.sc/rest-vs-crud-ca5522bf3fc3) verbs for your request, and also in URLs routes coming to your back end. That’s it; quite simple, quite standard.

My question on StackOverFlow:

“How do I write effects for “NATIVE” Actions in ngrx/data?

I know ngrx/data was created to get rid of Actions, Selectors, Effects, Reducers as much as it is possible, having therefore less boilerplate. However, there should be a way to create effects for NgRx Data.”

Let’s me explain in another way. For my projects, I needed to listen to NgRx data actions, like, for example, QUERY_ALL: ‘@ngrx/data/query-all’ or QUERY_ALL_SUCCESS: ‘@ngrx/data/query-all/success’, or others.

Does exist something like that?

fooNgrxDataEffectForQueryLoad$ = createEffect(() =>
            this.actions$
                .pipe(
                    ofType(('FooActionDispatchedByNgRxData')),

Of course, the above code does not work, and nobody told me a way to catch these automatic requests (NgRx Data Actions) on the fly for writing **_Effects. _**I didn’t find anything by Googling or on StackOverFlow.

A Dummy NgRx Data Project

We need a project to apply our concepts with a practical example and materialize all the ideas in our minds.

Have a look at this website that offers us a simple fake rest API to play with. Yeah, we don’t need to build a back end!

Image for post

Our candidate for today is a list of posts, and that’s all about the API and back end.

Defining the entities

Now, let’s start the party with NgRx Data…

We are going to use posts_, _so the very first thing we do is defining the entity…

Image for post

interfaces.ts

export default interface Post {
userId: number;
id: number;
title: string;
body: string;
}

Then, we say to NgRx Data which entities to use:

entity.component.ts

import { EntityMetadataMap } from '@ngrx/data';

const entityMetadata: EntityMetadataMap = {
    Post: {}
};
export const entityConfig = {
    entityMetadata
};

#angular #ngrx #javascript #redux #programming #data analytic