Add ngrx example

package.json

@@ -51,6 +51,8 @@
     "@angular/core": "~11.2.0",
     "@angular/platform-browser": "^11.2.3",
     "@angular/platform-browser-dynamic": "^11.2.3",
+    "@ngrx/effects": "^11.0.1",
+    "@ngrx/store": "^11.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.0"

projects/example-app/src/app/app.component.css

@@ -1,4 +1,8 @@
 .container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.container > * {
+  height: 300px;
 }

projects/example-app/src/app/app.component.html

@@ -3,4 +3,5 @@ <h1>Example App</h1>
   <app-switch-case-example></app-switch-case-example>
   <app-simple-loadable-component-example></app-simple-loadable-component-example>
   <app-loadable-component-example></app-loadable-component-example>
+  <app-ngrx-example></app-ngrx-example>
 </div>

projects/example-app/src/app/app.module.ts

@@ -8,6 +8,11 @@ import { LoadableComponentExampleComponent } from './components/loadable-compone
 import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
 import { JsonErrorComponent } from './components/json-error/json-error.component';
 import { SimpleLoadableComponentExampleComponent } from './components/simple-loadable-component-example/simple-loadable-component-example.component';
+import { NgrxExampleComponent } from './components/ngrx-example/ngrx-example.component';
+import { StoreModule } from '@ngrx/store';
+import { responseReducer } from './components/ngrx-example/reducer';
+import { EffectsModule } from '@ngrx/effects';
+import { LoadEffects } from './components/ngrx-example/effects';
 
 @NgModule({
   declarations: [
@@ -17,9 +22,14 @@ import { SimpleLoadableComponentExampleComponent } from './components/simple-loa
     LoadableComponentExampleComponent,
     LoadingSpinnerComponent,
     JsonErrorComponent,
+    NgrxExampleComponent,
   ],
   imports: [
     BrowserModule,
+    StoreModule.forRoot({
+      response: responseReducer,
+    }),
+    EffectsModule.forRoot([LoadEffects]),
     LoadableModule.forRoot({
       defaultComponents: {
         loading: LoadingSpinnerComponent,

projects/example-app/src/app/components/ngrx-example/actions.ts

@@ -0,0 +1,16 @@
+import { createAction, props } from '@ngrx/store';
+
+export const load = createAction(
+  '[Ngrx Example] Load',
+  props<{ id: number; error: boolean }>()
+);
+
+export const loadSuccess = createAction(
+  '[Ngrx Example] Load success',
+  props<{ response: unknown }>()
+);
+
+export const loadError = createAction(
+  '[Ngrx Example] Load error',
+  props<{ error: unknown }>()
+);

projects/example-app/src/app/components/ngrx-example/effects.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { map, mergeMap, catchError } from 'rxjs/operators';
+import { LoadService } from '../../load.service';
+import { load, loadError, loadSuccess } from './actions';
+
+@Injectable()
+export class LoadEffects {
+  load$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(load),
+      mergeMap((action) =>
+        this.loadService.load(action.id, action.error).pipe(
+          map((response) => loadSuccess({ response })),
+          catchError((error) => of(loadError({ error })))
+        )
+      )
+    )
+  );
+
+  constructor(private actions$: Actions, private loadService: LoadService) {}
+}

projects/example-app/src/app/components/ngrx-example/ngrx-example.component.html

@@ -0,0 +1,7 @@
+<h2>Ngrx example</h2>
+<button (click)="load(42, false)">Load</button>
+<button (click)="load(42, true)">Load with error</button>
+<ld-loadable *ngIf="loadable$ | async as loadable" [loadable]="loadable">
+  <h3>Loaded</h3>
+  <pre>{{ loadable.value | json }}</pre>
+</ld-loadable>

projects/example-app/src/app/components/ngrx-example/ngrx-example.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { load } from './actions';
+import { selectResponse } from './selector';
+
+@Component({
+  selector: 'app-ngrx-example',
+  templateUrl: './ngrx-example.component.html',
+})
+export class NgrxExampleComponent {
+  loadable$ = this.store.select(selectResponse);
+
+  constructor(private store: Store) {}
+
+  load(id: number, error: boolean): void {
+    this.store.dispatch(load({ id, error }));
+  }
+}

projects/example-app/src/app/components/ngrx-example/reducer.ts

@@ -0,0 +1,23 @@
+import { Action, createReducer, on } from '@ngrx/store';
+import {
+  errored,
+  idle,
+  loaded,
+  loading,
+} from 'projects/ngx-loadable/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { load, loadError, loadSuccess } from './actions';
+
+const reducer = createReducer(
+  idle as Loadable<unknown>,
+  on(load, (_) => loading),
+  on(loadSuccess, (_, { response }) => loaded(response)),
+  on(loadError, (_, { error }) => errored(error))
+);
+
+export function responseReducer(
+  state: Loadable<unknown> | undefined,
+  action: Action
+): Loadable<unknown> {
+  return reducer(state, action);
+}

projects/example-app/src/app/components/ngrx-example/selector.ts

@@ -0,0 +1,6 @@
+import { createFeatureSelector } from '@ngrx/store';
+import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+
+export const selectResponse = createFeatureSelector<Loadable<unknown>>(
+  'response'
+);