@softwarepioniere/ngrx-manager

HOW TO USE

Installation

Run

npm i @angular/common@^6.0.0-rc.0 || ^6.0.0 --save
npm i @angular/core@^6.0.0-rc.0 || ^6.0.0 --save
npm i @ngrx/effects@7.4.0 --save
npm i @ngrx/store@7.4.0 --save
npm i @ngrx/store-devtools@7.4.0 --save
npm i moment@2.24.0 --save
npm i ngrx-store-localstorage@7.0.0 --save
npm i ngx-moment@3.4.0 --save
npm i rxjs@6.5.2 --save
npm i @ngx-translate/core@11.0.1 --save
npm i @ngx-translate/http-loader@4.0.0 --save
npm i typescript@3.2.4 --save
npm i @softwarepioniere/language@^0.0.8 --save

Configuration

app.module.ts

imports: [
    ...
    NgrxManagerModule.forRoot(),
    ...

Sample implementation

The following code are available on github.

First you must add the ngrxManager to your actions like...

(anyActions).actions.ts

import {Action} from '@ngrx/store';
import {NgrxManagerConfig} from '@softwarepioniere/ngrx-manager/lib/model';
import {Post} from '../../data-api';

export const RESET_ACTION = '[ActionList] App reset';

export const GET_POSTS_ACTION = '[ActionList] Load posts';
export const GET_POSTS_SUCCESS_ACTION = '[ActionList] Loading posts succeeded';
export const GET_POSTS_FAILED_ACTION = '[ActionList] Loading posts failed';

export const POST_INSERT_POST_ACTION = '[ActionList] Insert Post';
export const POST_INSERT_POST_SUCCESS_ACTION = '[ActionList] Insert Post succeeded';
export const POST_INSERT_POST_FAILED_ACTION = '[ActionList] Insert Post failed';


export class ResetAction implements Action {
    readonly type = RESET_ACTION;

    constructor() {
    }
}

// GET POSTS
export class GetPostsAction implements Action {
    readonly type = GET_POSTS_ACTION;

    constructor(public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}


export class GetPostsSuccessAction implements Action {
    readonly type = GET_POSTS_SUCCESS_ACTION;

    constructor(public payload: any, public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}


export class GetPostsFailedAction implements Action {
    readonly type = GET_POSTS_FAILED_ACTION;

    constructor(public payload: any, public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}

// POST INSERT POST
export class PostInsertPostAction implements Action {
    readonly type = POST_INSERT_POST_ACTION;

    constructor(public post: Post, public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}


export class PostInsertPostSuccessAction implements Action {
    readonly type = POST_INSERT_POST_SUCCESS_ACTION;

    constructor(public payload: any, public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}


export class PostInsertPostFailedAction implements Action {
    readonly type = POST_INSERT_POST_FAILED_ACTION;

    constructor(public payload: any, public optPayload: any = null, public ngrxManager: NgrxManagerConfig = null) {
    }
}

export type Actions =
    GetPostsAction
    | GetPostsSuccessAction
    | GetPostsFailedAction
    | PostInsertPostAction
    | PostInsertPostSuccessAction
    | PostInsertPostFailedAction
    | ResetAction
    ;

First you must change your query and post effects, so that each call use the ngrxManager to check if call can execute or must be wait.

(anyQuery).effects.ts

@Effect()
    getPosts$: Observable<Action> = this.actions$.pipe(
        ofType(ac.GET_POSTS_ACTION),
        map((x: ac.GetPostsAction) => {
            return this.ngrxManagerService.checkRequestCall(ac.GET_POSTS_ACTION, x, RequestMethod.QUERY, RequestType.Anfrage);
        }),
        filter(x => typeof x !== 'boolean'),
        flatMap((x: ac.GetPostsAction) => {
            const optPayload = (x !== undefined && x !== null && x.optPayload !== undefined) ? x.optPayload : null;
            return this._dataService.getPosts()
                .map((result: any) => {
                    const nextAction = new ac.GetPostsSuccessAction(result, optPayload);
                    this.ngrxManagerService.checkRequestResult(ac.GET_POSTS_ACTION, x, RequestMethod.QUERY, RequestType.Erfolgreich, nextAction);
                    return nextAction;
                })
                .catch((error: any) => {
                    const nextAction = new ac.GetPostsFailedAction(error, optPayload);
                    this.ngrxManagerService.checkRequestResult(ac.GET_POSTS_ACTION, x, RequestMethod.QUERY, RequestType.Fehler, nextAction, error);
                    return of(nextAction);
                });
        })
    );

(anyPost).effects.ts

 @Effect()
    insertPost$: Observable<Action> = this.actions$.pipe(
        ofType(ac.POST_INSERT_POST_ACTION),
        map((x: ac.GetPostsAction) => {
            return this.ngrxManagerService.checkRequestCall(ac.POST_INSERT_POST_ACTION, x, RequestMethod.COMMAND, RequestType.Anfrage);
        }),
        filter(x => typeof x !== 'boolean'),
        flatMap((x: ac.PostInsertPostAction) => {
            const optPayload = (x !== undefined && x !== null && x.optPayload !== undefined) ? x.optPayload : null;
            return this._dataService.postInsertPost()
                .map((result: any) => {
                    const nextAction = new ac.PostInsertPostSuccessAction(result, optPayload);
                    this.ngrxManagerService.checkRequestResult(ac.POST_INSERT_POST_ACTION, x, RequestMethod.COMMAND, RequestType.Erfolgreich, nextAction);
                    return nextAction;
                })
                .catch((error: any) => {
                    const nextAction = new ac.PostInsertPostFailedAction(error, optPayload);
                    this.ngrxManagerService.checkRequestResult(ac.POST_INSERT_POST_ACTION, x, RequestMethod.COMMAND, RequestType.Fehler, nextAction, error);
                    return of(nextAction);
                });
        })
    );

Application Insight

To track track executed, non executed, failed or succeeded query, the ngrxManager send this actions:

export const INSIGHTS_QUERY_NOT_EXECUTED = '[SopiNgrxManager] Insights :: Query execution';
export const INSIGHTS_QUERY_EXECUTE = '[SopiNgrxManager] Insights :: Query execution';
export const INSIGHTS_QUERY_SUCCESS = '[SopiNgrxManager] Insights :: Query success';
export const INSIGHTS_QUERY_FAILED = '[SopiNgrxManager] Insights :: Query failed';
export const INSIGHTS_QUERY_FAILED_BAD_REQUEST = '[SopiNgrxManager] Insights :: Query failed with bad request';

export const INSIGHTS_COMMAND_NOT_EXECUTED = '[SopiNgrxManager] Insights :: Command execution';
export const INSIGHTS_COMMAND_EXECUTE = '[SopiNgrxManager] Insights :: Command execution';
export const INSIGHTS_COMMAND_SUCCESS = '[SopiNgrxManager] Insights :: Command success';
export const INSIGHTS_COMMAND_FAILED = '[SopiNgrxManager] Insights :: Command failed';
export const INSIGHTS_COMMAND_FAILED_BAD_REQUEST = '[SopiNgrxManager] Insights :: Command failed with bad request';