feat: add functions onNgrxForms and wrapReducerWithFormStateUpdate to allow better integration with createReducer from ngrx 8

Author: MrWolfZ

package-lock.json

@@ -62,7 +62,7 @@
     "@angular/forms": "8.0.0",
     "@angular/platform-browser": "8.0.0",
     "@angular/platform-browser-dynamic": "8.0.0",
-    "@ngrx/store": "7.4.0",
+    "@ngrx/store": "8.0.1",
     "@types/jasmine": "2.8.6",
     "@types/node": "10.12.18",
     "codecov": "3.1.0",

package.json

@@ -40,6 +40,7 @@ import {
   NgrxSelectViewAdapter,
   NgrxStatusCssClassesDirective,
   NgrxValueConverters,
+  onNgrxForms,
   removeArrayControl,
   removeGroupControl,
   reset,
@@ -54,6 +55,7 @@ import {
   updateGroup,
   updateRecursive,
   validate,
+  wrapReducerWithFormStateUpdate,
 } from './ngrx-forms';
 
 describe('ngrx-forms', () => {
@@ -68,6 +70,8 @@ describe('ngrx-forms', () => {
   it(`should export ${formGroupReducer.name}`, () => expect(formGroupReducer).toBeDefined());
   it(`should export ${formArrayReducer.name}`, () => expect(formArrayReducer).toBeDefined());
   it(`should export ${formStateReducer.name}`, () => expect(formStateReducer).toBeDefined());
+  it(`should export ${onNgrxForms.name}`, () => expect(onNgrxForms).toBeDefined());
+  it(`should export ${wrapReducerWithFormStateUpdate.name}`, () => expect(wrapReducerWithFormStateUpdate).toBeDefined());
   it(`should export ${addArrayControl.name}`, () => expect(addArrayControl).toBeDefined());
   it(`should export ${addGroupControl.name}`, () => expect(addGroupControl).toBeDefined());
   it(`should export ${clearAsyncError.name}`, () => expect(clearAsyncError).toBeDefined());

src/ngrx-forms.spec.ts

@@ -23,7 +23,12 @@ export {
 export { formControlReducer } from './control/reducer';
 export { formGroupReducer } from './group/reducer';
 export { formArrayReducer } from './array/reducer';
-export { formStateReducer, createFormStateReducerWithUpdate } from './reducer';
+export {
+  createFormStateReducerWithUpdate,
+  formStateReducer,
+  onNgrxForms,
+  wrapReducerWithFormStateUpdate,
+} from './reducer';
 
 export * from './update-function/update-array';
 export * from './update-function/update-group';

src/ngrx-forms.ts

@@ -1,5 +1,6 @@
+import { Action, createReducer } from '@ngrx/store';
 import { MarkAsTouchedAction, SetValueAction } from './actions';
-import { createFormStateReducerWithUpdate, formStateReducer } from './reducer';
+import { createFormStateReducerWithUpdate, formStateReducer, onNgrxForms, wrapReducerWithFormStateUpdate } from './reducer';
 import { FORM_CONTROL_ID, FORM_CONTROL_INNER5_ID, FORM_CONTROL_INNER_ID, FormGroupValue, INITIAL_STATE } from './update-function/test-util';
 import { updateGroup } from './update-function/update-group';
 
@@ -125,3 +126,139 @@ describe(createFormStateReducerWithUpdate.name, () => {
     expect(() => createFormStateReducerWithUpdate<any>(s => s)(undefined, { type: '' })).toThrowError();
   });
 });
+
+describe(onNgrxForms.name, () => {
+  it('should call the reducer for controls', () => {
+    const state = {
+      prop: 'value',
+      form: INITIAL_STATE.controls.inner,
+    };
+
+    const resultState = onNgrxForms<typeof state>().reducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER_ID));
+    expect(resultState.form).not.toBe(INITIAL_STATE.controls.inner);
+  });
+
+  it('should call the reducer for groups', () => {
+    const state = {
+      prop: 'value',
+      form: INITIAL_STATE,
+    };
+
+    const resultState = onNgrxForms<typeof state>().reducer(state, new MarkAsTouchedAction(FORM_CONTROL_ID));
+    expect(resultState.form).not.toBe(INITIAL_STATE);
+  });
+
+  it('should call the reducer for arrays', () => {
+    const state = {
+      prop: 'value',
+      form: INITIAL_STATE.controls.inner5,
+    };
+
+    const resultState = onNgrxForms<typeof state>().reducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER5_ID));
+    expect(resultState.form).not.toBe(INITIAL_STATE.controls.inner5);
+  });
+
+  it('should work with createReducer', () => {
+    const state = {
+      prop: 'value',
+      control: INITIAL_STATE.controls.inner,
+      group: INITIAL_STATE,
+      array: INITIAL_STATE.controls.inner5,
+    };
+
+    const reducer = createReducer(
+      state,
+      onNgrxForms(),
+    );
+
+    let resultState = reducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER_ID));
+    expect(resultState.control).not.toBe(INITIAL_STATE.controls.inner);
+
+    resultState = reducer(state, new MarkAsTouchedAction(FORM_CONTROL_ID));
+    expect(resultState.group).not.toBe(INITIAL_STATE);
+
+    resultState = reducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER5_ID));
+    expect(resultState.array).not.toBe(INITIAL_STATE.controls.inner5);
+  });
+});
+
+describe(wrapReducerWithFormStateUpdate.name, () => {
+  const initialState = {
+    prop: 'value',
+    control: INITIAL_STATE.controls.inner,
+    group: INITIAL_STATE,
+    array: INITIAL_STATE.controls.inner5,
+  };
+
+  function reducer(state = initialState, _: Action) {
+    return state;
+  }
+
+  it('should update a control after the reducer', () => {
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.control, s => {
+      expect(s).toBe(INITIAL_STATE.controls.inner);
+      return ({ ...s });
+    });
+
+    const resultState = wrappedReducer(undefined, { type: '' });
+    expect(resultState.control).not.toBe(INITIAL_STATE.controls.inner);
+  });
+
+  it('should update a group after the reducer', () => {
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.group, s => {
+      expect(s).toBe(INITIAL_STATE);
+      return ({ ...s });
+    });
+
+    const resultState = wrappedReducer(undefined, { type: '' });
+    expect(resultState.group).not.toBe(INITIAL_STATE);
+  });
+
+  it('should update an array after the reducer', () => {
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.array, s => {
+      expect(s).toBe(INITIAL_STATE.controls.inner5);
+      return ({ ...s });
+    });
+
+    const resultState = wrappedReducer(undefined, { type: '' });
+    expect(resultState.array).not.toBe(INITIAL_STATE.controls.inner5);
+  });
+
+  it('should set the updated form state', () => {
+    const updatedControl = { ...INITIAL_STATE.controls.inner };
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.control, () => updatedControl);
+    const resultState = wrappedReducer(undefined, { type: '' });
+    expect(resultState.control).toBe(updatedControl);
+  });
+
+  it('should not update the state if the form state is not updated', () => {
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.control, s => s);
+    const resultState = wrappedReducer(undefined, { type: '' });
+    expect(resultState).toBe(initialState);
+  });
+
+  it('should work with createReducer', () => {
+    const state = {
+      prop: 'value',
+      control: INITIAL_STATE.controls.inner,
+      group: INITIAL_STATE,
+      array: INITIAL_STATE.controls.inner5,
+    };
+
+    const reducer = createReducer(
+      state,
+      onNgrxForms(),
+    );
+
+    const wrappedReducer = wrapReducerWithFormStateUpdate(reducer, s => s.control, s => ({ ...s }));
+
+    let resultState = wrappedReducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER_ID));
+    expect(resultState.control).not.toBe(INITIAL_STATE.controls.inner);
+
+    resultState = wrappedReducer(state, new MarkAsTouchedAction(FORM_CONTROL_ID));
+    expect(resultState.group).not.toBe(INITIAL_STATE);
+
+    resultState = wrappedReducer(state, new MarkAsTouchedAction(FORM_CONTROL_INNER5_ID));
+    expect(resultState.array).not.toBe(INITIAL_STATE.controls.inner5);
+  });
+});

src/reducer.spec.ts

@@ -1,5 +1,6 @@
 import { Action, ActionReducer } from '@ngrx/store';
 
+import { ALL_NGRX_FORMS_ACTION_TYPES } from './actions';
 import { formArrayReducer } from './array/reducer';
 import { formControlReducer } from './control/reducer';
 import { formGroupReducer } from './group/reducer';
@@ -73,3 +74,62 @@ export function createFormStateReducerWithUpdate<TValue>(
     return newState === state ? state : updateFnArr.reduce((s, f) => f(s), newState);
   };
 }
+
+/**
+ * This function returns an object that can be passed to ngrx's `createReducer`
+ * function (available starting with ngrx version 8). By doing this all form
+ * state properties on the state will be updated whenever necessary (i.e.
+ * whenever an ngrx-forms action is dispatched).
+ *
+ * To manually update a form state (e.g. to validate it) use
+ * `wrapReducerWithFormStateUpdate`.
+ */
+export function onNgrxForms<TState = any>(): { reducer: ActionReducer<TState>; types: string[] } {
+  function reduceNestedFormState(state: TState, key: keyof TState, action: Action): TState {
+    const value = state[key];
+
+    if (!isFormState(value)) {
+      return state;
+    }
+
+    return {
+      ...state,
+      [key]: formStateReducer(value, action),
+    };
+  }
+
+  return {
+    reducer: (state, action) =>
+      Object.keys(state!).reduce((s, key) => reduceNestedFormState(s, key as keyof TState, action)!, state!),
+    types: ALL_NGRX_FORMS_ACTION_TYPES,
+  };
+}
+
+/**
+ * This function wraps a reducer and returns another reducer that first calls
+ * the given reducer and then calls the given update function for the form state
+ * that is specified by the form state locator function.
+ */
+export function wrapReducerWithFormStateUpdate<TState, TFormState extends AbstractControlState<any>>(
+  reducer: ActionReducer<TState>,
+  formStateLocator: (state: TState) => TFormState,
+  updateFn: (formState: TFormState) => TFormState,
+): ActionReducer<TState> {
+  return (state, action) => {
+    const updatedState = reducer(state, action);
+
+    const formState = formStateLocator(updatedState);
+    const formStateKey = Object.keys(updatedState).find(key => updatedState[key as keyof TState] as any === formState)!;
+
+    const updatedFormState = updateFn(formState);
+
+    if (updatedFormState === formState) {
+      return updatedState;
+    }
+
+    return {
+      ...updatedState,
+      [formStateKey]: updatedFormState,
+    };
+  };
+}