Upgrading ngrx/store to utilize new creator functions

docs/user-guide/validation.md

@@ -149,10 +149,10 @@ validateBookExists$: Observable<Action> = this.actions$
     this.http.get(`api/books/search/${a.searchTerm}`)
       .map(resp =>
         resp.status === 404
-          ? new SetAsyncErrorAction(a.controlId, "exists", true)
-          : new ClearAsyncErrorAction(a.controlId, "exists")
+          ? SetAsyncErrorAction(a.controlId, "exists", true)
+          : ClearAsyncErrorAction(a.controlId, "exists")
       )
       // controlId may either be sent with the action or obtained from the store via withLatestFrom
-      .startWith(new StartAsyncValidationAction(a.controlId, "exists"))
+      .startWith(StartAsyncValidationAction(a.controlId, "exists"))
   );
 ```

example-app/src/app/async-validation/async-validation.effects.ts

@@ -23,7 +23,7 @@ export class AsyncValidationEffects {
     switchMap(fs =>
       concat(
         timer(300).pipe(
-          map(() => new StartAsyncValidationAction(
+          map(() => StartAsyncValidationAction(
             fs.controls.searchTerm.id,
             'exists',
           ))
@@ -43,7 +43,7 @@ export class AsyncValidationEffects {
                 new SetSearchResultAction(
                   resp.items.map((i: any) => i.volumeInfo.title),
                 ),
-                new ClearAsyncErrorAction(
+                ClearAsyncErrorAction(
                   fs.controls.searchTerm.id,
                   'exists',
                 ),
@@ -52,7 +52,7 @@ export class AsyncValidationEffects {
 
             return [
               new SetSearchResultAction([]),
-              new SetAsyncErrorAction(
+              SetAsyncErrorAction(
                 fs.controls.searchTerm.id,
                 'exists',
                 fs.value.searchTerm,
@@ -61,7 +61,7 @@ export class AsyncValidationEffects {
           }),
           catchError(_ => [
             new SetSearchResultAction([]),
-            new SetAsyncErrorAction(
+            SetAsyncErrorAction(
               fs.controls.searchTerm.id,
               'exists',
               fs.value.searchTerm,

example-app/src/app/dynamic/dynamic.component.ts

@@ -44,7 +44,7 @@ export class DynamicPageComponent {
     this.formState$.pipe(
       take(1),
       map(s => s.controls.array.id),
-      map(id => new RemoveArrayControlAction(id, index)),
+      map(id => RemoveArrayControlAction(id, index)),
     ).subscribe(this.store);
   }
 

example-app/src/app/local-state-advanced/local-state-advanced.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Action, ActionsSubject } from '@ngrx/store';
-import { Actions, SetValueAction } from 'ngrx-forms';
 import { Subscription } from 'rxjs';
 
 import { GetManufacturersAction, INITIAL_LOCAL_STATE, reducer } from './local-state-advanced.reducer';
+import {NgrxFormActionTypes, SetValueAction} from "../../../../src/actions";
 
 @Component({
   selector: 'ngf-local-state-advanced',
@@ -33,16 +33,16 @@ export class LocalStateAdvancedComponent implements OnInit, OnDestroy {
     this.subscription.unsubscribe();
   }
 
-  handleFormAction(action: Actions<any>) {
+  handleFormAction(action: NgrxFormActionTypes) {
     this.updateState(action);
 
     // trigger loading of new manufacturers list in effect
-    if (action.type === SetValueAction.TYPE && action.controlId === this.localState.formState.controls.countryCode.id) {
-      this.actionsSubject.next(new GetManufacturersAction(action.value));
+    if (action.type === SetValueAction.type && action.controlId === this.localState.formState.controls.countryCode.id) {
+      this.actionsSubject.next(GetManufacturersAction(action.value));
     }
   }
 
-  private updateState(action: Action): boolean {
+  private updateState(action: NgrxFormActionTypes): boolean {
     const localState = reducer(this.localState, action);
     const updated = localState !== this.localState;
     this.localState = localState;

example-app/src/app/local-state-advanced/local-state-advanced.effects.ts

@@ -1,29 +1,35 @@
 import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Action } from '@ngrx/store';
+import {  Effect, ofType } from '@ngrx/effects';
 import { Observable } from 'rxjs';
 import { debounceTime, delay, map } from 'rxjs/operators';
 
-import { GetManufacturersAction, SetManufacturersAction } from './local-state-advanced.reducer';
+import {
+  GetManufacturersAction,
+  ManufacturersActionsTypes,
+  SetManufacturersAction
+} from './local-state-advanced.reducer';
 
 @Injectable()
 export class LocalStateAdvancedEffects {
 
   @Effect()
-  getManufacturers$: Observable<Action> = this.actions$.pipe(
-    ofType(GetManufacturersAction.TYPE),
+  getManufacturers$: Observable<ManufacturersActionsTypes> = this.actions$.pipe(
     debounceTime(300),
     delay(1000),
-    map((action: GetManufacturersAction) => {
-      if (action.countryCode === 'US') {
-        return new SetManufacturersAction(['Ford', 'Chevrolet']);
-      } else if (action.countryCode === 'UK') {
-        return new SetManufacturersAction(['Aston Martin', 'Jaguar']);
-      } else {
-        return new SetManufacturersAction([]);
+    ofType(GetManufacturersAction.type),
+    map((action: ManufacturersActionsTypes) => {
+      if (action.type === GetManufacturersAction.type) {
+        if (action.countryCode === 'US') {
+          return SetManufacturersAction(['Ford', 'Chevrolet']);
+        } else if (action.countryCode === 'UK') {
+          return SetManufacturersAction(['Aston Martin', 'Jaguar']);
+        } else {
+          return SetManufacturersAction([]);
+        }
       }
+      return SetManufacturersAction([]);
     })
   );
 
-  constructor(private actions$: Actions) { }
+  constructor(private actions$: Observable<ManufacturersActionsTypes>) { }
 }

example-app/src/app/local-state-advanced/local-state-advanced.reducer.ts

@@ -1,17 +1,17 @@
-import { Action, combineReducers } from '@ngrx/store';
-import { createFormGroupState, formGroupReducer, FormGroupState, setValue, updateGroup } from 'ngrx-forms';
+import {Action, combineReducers, createAction, union} from '@ngrx/store';
+import {
+  createFormGroupState,
+  formGroupReducer,
+  FormGroupState,
+  setValue,
+  updateGroup
+} from "../../../../src/ngrx-forms";
 
-export class GetManufacturersAction implements Action {
-  static readonly TYPE = 'localStateAdvanced/GET_MANUFACTURERS';
-  readonly type = GetManufacturersAction.TYPE;
-  constructor(public countryCode: string) { }
-}
+export const GetManufacturersAction = createAction('localStateAdvanced/GET_MANUFACTURERS', (countryCode: string) => ({ countryCode: countryCode }));
+export const SetManufacturersAction = createAction('localStateAdvanced/SET_MANUFACTURERS', (manufacturers: string[]) => ({ manufacturers: manufacturers }));
 
-export class SetManufacturersAction implements Action {
-  static readonly TYPE = 'localStateAdvanced/SET_MANUFACTURERS';
-  readonly type = SetManufacturersAction.TYPE;
-  constructor(public manufacturers: string[]) { }
-}
+export const ManufacturersActions = union({GetManufacturersAction, SetManufacturersAction});
+export type ManufacturersActionsTypes = typeof ManufacturersActions;
 
 export interface FormValue {
   countryCode: string;
@@ -36,10 +36,10 @@ export const INITIAL_LOCAL_STATE: LocalState = {
 };
 
 const reducers = combineReducers<LocalState>({
-  manufacturers(manufacturers = [], a: Action) {
+  manufacturers(manufacturers: string[] = [], a: Action) {
     // update from loaded data
-    if (a.type === SetManufacturersAction.TYPE) {
-      return (a as SetManufacturersAction).manufacturers;
+    if (a.type === SetManufacturersAction.type) {
+      return a as any['manufacturers'];
     }
     return manufacturers;
   },

example-app/src/app/local-state-introduction/local-state-introduction.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
-import { Actions } from 'ngrx-forms';
 
 import { INITIAL_FORM_STATE, reducer } from './local-state-introduction.reducer';
+import {NgrxFormActionTypes} from "../../../../src/actions";
 
 @Component({
   selector: 'ngf-local-state-introduction',
@@ -11,7 +11,7 @@ import { INITIAL_FORM_STATE, reducer } from './local-state-introduction.reducer'
 export class LocalStateIntroductionComponent {
   formState = INITIAL_FORM_STATE;
 
-  handleFormAction(action: Actions<any>) {
+  handleFormAction(action: NgrxFormActionTypes) {
     this.formState = reducer(this.formState, action);
   }
 }

example-app/src/app/material-example/material.component.ts

@@ -1,10 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { FormGroupState, NgrxValueConverter, NgrxValueConverters, ResetAction, SetValueAction } from 'ngrx-forms';
 import { Observable } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 
 import { FormValue, INITIAL_STATE, SetSubmittedValueAction, State } from './material.reducer';
+import {
+  FormGroupState,
+  NgrxValueConverter,
+  NgrxValueConverters,
+  ResetAction,
+  SetValueAction
+} from "../../../../src/ngrx-forms";
 
 @Component({
   selector: 'ngf-material',
@@ -24,7 +30,7 @@ export class DynamicPageComponent {
   hobbyOptions = ['Sports', 'Video Games'];
 
   dateValueConverter: NgrxValueConverter<Date | null, string | null> = {
-    convertViewToStateValue(value) {
+    convertViewToStateValue(value: any) {
       if (value === null) {
         return null;
       }
@@ -38,8 +44,8 @@ export class DynamicPageComponent {
   };
 
   reset() {
-    this.store.dispatch(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
-    this.store.dispatch(new ResetAction(INITIAL_STATE.id));
+    this.store.dispatch(SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
+    this.store.dispatch(ResetAction(INITIAL_STATE.id));
   }
 
   submit() {

example-app/src/app/simple-form-ngrx8/simple-form-ngrx8.component.ts

@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { FormGroupState, ResetAction, SetValueAction } from 'ngrx-forms';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
 import { FormValue, INITIAL_STATE, setSubmittedValue, State } from './simple-form-ngrx8.reducer';
+import {ResetAction, SetValueAction} from "../../../../src/actions";
+import {FormGroupState} from "../../../../src/state";
 
 @Component({
   selector: 'ngf-simple-form-ngrx8',
@@ -22,8 +23,8 @@ export class SimpleFormNgrx8PageComponent {
   }
 
   reset() {
-    this.store.dispatch(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
-    this.store.dispatch(new ResetAction(INITIAL_STATE.id));
+    this.store.dispatch(SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
+    this.store.dispatch(ResetAction(INITIAL_STATE.id));
   }
 
   submit() {

example-app/src/app/simple-form/simple-form.component.ts

@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { FormGroupState, ResetAction, SetValueAction } from 'ngrx-forms';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
 import { FormValue, INITIAL_STATE, SetSubmittedValueAction, State } from './simple-form.reducer';
+import {ResetAction, SetValueAction} from "../../../../src/actions";
+import {FormGroupState} from "../../../../src/state";
 
 @Component({
   selector: 'ngf-simple-form',
@@ -22,8 +23,8 @@ export class SimpleFormPageComponent {
   }
 
   reset() {
-    this.store.dispatch(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
-    this.store.dispatch(new ResetAction(INITIAL_STATE.id));
+    this.store.dispatch(SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
+    this.store.dispatch(ResetAction(INITIAL_STATE.id));
   }
 
   submit() {

example-app/src/app/sync-validation/sync-validation.component.ts

@@ -39,8 +39,8 @@ export class SyncValidationPageComponent {
   }
 
   reset() {
-    this.store.dispatch(new SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
-    this.store.dispatch(new ResetAction(INITIAL_STATE.id));
+    this.store.dispatch(SetValueAction(INITIAL_STATE.id, INITIAL_STATE.value));
+    this.store.dispatch(ResetAction(INITIAL_STATE.id));
   }
 
   submit() {