@zionapps/ngrx-core

Core NgRx Library

Requirements

• Angular < 6
• NgRx < 6
• RxJs < 6

How to Use this Library?

1. File Structure
2. Domain
3. Actions
4. Reducers
5. Selectors
6. Effects
7. Module

1. File Structure

Inside the folder for each domain

• app-message.actions.ts
• app-message.domain.ts
• app-message.module.ts
• app-message.reducer.ts
• app-message.selectors.ts
• app-message.utils.ts

2. Domain Example

import {EntityState} from '@ngrx/entity';
import {
  INgRxCoreModuleConfig,
  INgRxCoreLastResult,
} from '@zionapps/ngrx-core';

export interface Item {
  id?: number;
  // Add additional properties
}

export interface ItemsState extends EntityState<Item> {
  currentId: number | null;
  lastResult: INgRxCoreLastResult | null;
  loaded: boolean;
  // Add custom properties
}

export const ItemsDomain: INgRxCoreModuleConfig = {
  autoSaveDelay: 100,
  endpoint: 'https://www.endpoint.com',
  idProperty: 'id',
  initialStateMap: {
    // Add custom properties or override defaults
  },
  storeName: 'Items',
  timeoutForRequests: 30000,
};

3. Actions Example

Use the standard approach

import { generateNgRxCoreActions, INgRxCoreActionSet } from '@zionapps/ngrx-core';
import { MyItem, MyItemsConfig} from './my-items.domain';

export const MyItemsActions: INgRxCoreActionSet<MyItem, number> = generateNgRxCoreActions<MyItem, number>(MyItemsConfig.pluralName);

Extend with more actions:

• generateNgRxCoreEmptyPayloadAction()
• generateNgRxCoreErrorPayloadAction()
• generateNgRxCoreItemPayloadAction()
• generateNgRxCoreListPayloadAction()

const {
  Type,
  ...ActionGenerators,
} = generateNgRxCoreActions<MyItem, number>(MyItemsConfig.pluralName);

const MyItemsType = {
  // Spread the original types
  ...Type,

  // Add additional action types
  Custom: generateNgRxCoreActionName(ItemsDomain.storeName, 'Custom'),
};

export const MyItemsActions = {
  Type: MyItemsType,

  // Spread the original actions
  ...ActionGenerators,

  // Add additional action generators
  Custom: generateNgRxCoreEmptyPayloadAction(ItemsType.Custom),

4. Reducer Example

Use the standard approach

import { generateNgRxCoreReducer} from '@zionapps/ngrx-core';
import { MyItem, MyItemsConfig, MyItemsState } from './my-items.domain';
import { myItemsAdapter } from './my-items.utils';

export const myItemsReducer: MyItemsState = generateNgRxCoreReducer<MyItem>(myItemsAdapter, MyItemsConfig);

Extend with more reducers

TBD

5. Selector Example

Use the standard approach

import { generateNgRxCoreSelectors, INgRxCoreSelectors } from '@zionapps/ngrx-core';
import { MyItem, MyItemsConfig } from './my-items.domain';
import { myItemsAdapter } from './my-items.utils';

export const MyItemSelectors: INgRxCoreSelectors<MyItem> = generateNgRxCoreSelectors<MyItem>(myItemsAdapter, MyItemsConfig.pluralName);

Extend with more selectors

TBD

6. Effects Example

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { NgRxCoreAction, NgRxCoreEffects } from '@zionapps/ngrx-core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MyItemsActions } from './my-items.actions';
import { MyItem, MyItemsConfig } from './my-items.domain';
import { MyItemsService } from './my-items.service';

@Injectable()
export class MyItemsEffects extends NgRxCoreEffects<MyItem, number> {
  constructor(protected actions$: Actions,
              protected service: MyItemsService,
              protected store: Store<any>) {
    super(actions$, MyItemsActions, MyItemsConfig, service, store);
  }

  @Effect()
  backgroundFetchAllRemote$: Observable<NgRxCoreAction> = this.getBackgroundFetchAllRemote$();

  @Effect()
  backgroundFetchOneRemote$: Observable<NgRxCoreAction> = this.getBackgroundFetchOneRemote$();

  @Effect()
  createManyRemote$: Observable<NgRxCoreAction> = this.getCreateManyRemote$();

  @Effect()
  createOneRemote$: Observable<NgRxCoreAction> = this.getCreateOneRemote$();

  @Effect()
  deleteOneRemote$: Observable<NgRxCoreAction> = this.getDeleteOneRemote$();

  @Effect()
  fetchAllRemote$: Observable<NgRxCoreAction> = this.getFetchAllRemote$();

  @Effect()
  fetchOneRemote$: Observable<NgRxCoreAction>  = this.getFetchOneRemote$();

  @Effect()
  loadAllFromDevice$: Observable<NgRxCoreAction> = this.getLoadAllFromDevice$();

  @Effect()
  loadStateFromDevice$: Observable<NgRxCoreAction> = this.getLoadStateFromDevice$();

  @Effect()
  saveAllToDevice$: Observable<NgRxCoreAction>  = this.getSaveAllToDevice$();

  @Effect()
  saveStateToDevice$: Observable<NgRxCoreAction> = this.getSaveStateToDevice$();

  @Effect()
  updateManyRemote$: Observable<NgRxCoreAction> = this.getUpdateManyRemote$();

  @Effect()
  updateOne$: Observable<NgRxCoreAction> = this.getUpdateOne$();
  
  // Custom Effect
  @Effect()
  custom$: Observable<NgRxCoreAction> = this.actions$.pipe(
    ofType(MyItemsActions.Type.LoadAllFromDeviceRequest),
    map((action: NgRxCoreAction) => {
      const { payload, source, token } = action;
      return MyItemsActions.SaveAllToDeviceRequest(source, payload, token);
    },
  );
}

Application Insights Reporting

1. Install Application Insights

npm install applicationinsights-js
npm install @types/applicationinsights-js

2. Use JavaScript in Project

Import Application Insights JS via the .angular-cli.json file

{
  ...
  "apps": [
    {
      ...
      "scripts": [
        "../node_modules/applicationinsights-js/dist/ai.0.js"
      ]
      ...
    }
  ...
  ]
}

3. Setup Environment

Ensure that the following environment variables are set for environment.prod.js. Tracking is off by default during development.

export const environment = {
  ...
  appInsightsInstrumentationKey: '{FILL_IN}',
  appVersion: '{FILL_IN}',
  produciton: true,
  ...
};

4. Create Module

import {NgModule} from '@angular/core';
import {EffectsModule} from '@ngrx/effects';
import {
  APPLICATION_INSIGHTS_CONFIG,
  NgRxCoreApplicationInsightsEffects,
  generateApplicationInsightsConfig,
} from '@zionapps/ngrx-core';
import {environment} from '../../../environments/environment';

@NgModule({
  declarations: [],
  imports: [
    EffectsModule.forFeature([NgRxCoreApplicationInsightsEffects]),
  ],
  providers: [
    NgRxCoreApplicationInsightsEffects,
    { provide: APPLICATION_INSIGHTS_CONFIG, useValue: generateApplicationInsightsConfig(environment)}
  ]
})
export class ApplicationInsightsModule {}

5. Use Application Insights Module

@NgModule({
  ...
  imports: [
    ...
    ApplicationInsightsModule,
    ...
  ],
  ...
})
export class YourModule {}