docs: update user guide for new ngrx 8 functions

Author: MrWolfZ

docs/user-guide/index.md

@@ -78,6 +78,19 @@ export function appReducer(state = initialState, action: Action): AppState {
 }
 ```
 
+If you are using ngrx version 8 or above you can alternatively use `onNgrxForms` with `createReducer`:
+
+```ts
+import { createReducer } from '@ngrx/store';
+import { onNgrxForms } from 'ngrx-forms';
+
+export const appReducer = createReducer(
+  initialState,
+  onNgrxForms(),
+  // your other reducers...
+);
+```
+
 Expose the form state inside your component:
 
 ```typescript

docs/user-guide/updating-the-state.md

@@ -1,5 +1,78 @@
 All form states are internally updated by **ngrx-forms** through dispatching actions from the directives. While this is of course also possible for you there exist a set of update functions that can be used to update form states. This is mainly useful to change the state as a result of a different action in your reducer. Note that **ngrx-forms** is coded in such a way that no state references will change if nothing inside the state changes. It is therefore perfectly safe to repeatedly call any of the functions below and the state will be updated exactly once or not at all if nothing changed. Each function can be imported from `'ngrx-forms'` (e.g. `import { setValue } from 'ngrx-forms';`).
 
+Usually you will update your form states in your reducers. The following example shows how this can be done.
+
+```ts
+import { Action } from '@ngrx/store';
+import { createFormGroupState, updateGroup, validate } from 'ngrx-forms';
+
+export interface LoginFormValue {
+  username: string;
+  password: string;
+  stayLoggedIn: boolean;
+}
+
+export const initialLoginFormValue: LoginFormValue = {
+  username: '',
+  password: '',
+  stayLoggedIn: false,
+};
+
+// this function updates a form group state based on the passed
+// update functions (see the sections below for more details on
+// all available update functions as well as on updating groups)
+export const validateLoginForm = updateGroup<LoginFormValue>({
+  username: validate(value => !value ? { missing: true } : {}),
+  // other updates...
+});
+
+const initialState = {
+  loginForm: createFormGroupState('loginForm', initialLoginFormValue),
+  // your other properties...
+};
+
+export function reducer(state = initialState, action: Action) {
+  const loginForm = validateLoginForm(formGroupReducer(state.loginForm, action));
+  if (loginForm !== state.loginForm) {
+    state = { ...state, loginForm };
+  }
+
+  switch (action.type) {
+    case 'some action type':
+      // modify state
+      return state;
+
+    default: {
+      return state;
+    }
+  }
+}
+```
+
+If you are using ngrx version 8 or above you can alternatively use `onNgrxForms` and `wrapReducerWithFormStateUpdate` with `createReducer`:
+
+```ts
+import { createReducer } from '@ngrx/store';
+import { onNgrxForms, wrapReducerWithFormStateUpdate } from 'ngrx-forms';
+
+const rawReducer = createReducer(
+  initialState,
+  onNgrxForms(),
+  // your other reducers...
+);
+
+// wrapReducerWithFormStateUpdate calls the update function
+// after the given reducer; you can wrap this reducer again
+// if you have multiple forms in your state
+export const reducer = wrapReducerWithFormStateUpdate(
+  rawReducer,
+  // point to the form state to update
+  s => s.loginForm,
+  // this function is always called after the reducer
+  validateLoginForm,
+);
+```
+
 Below you will find a complete list of all update functions provided by **ngrx-forms**. Each section also shows how to use actions directly instead of the update functions (the examples directly call the `formStateReducer` but you can of course dispatch these actions from anywhere in your code). To view all available actions the best place is [the code itself](https://github.com/MrWolfZ/ngrx-forms/blob/master/src/actions.ts).
 
 #### Setting the value
@@ -284,7 +357,7 @@ export interface MyFormValue {
   someNumbers: number[];
 }
 
-const updateMyFormGroup = updateGroup<MyFormValue>({
+const validateMyForm = updateGroup<MyFormValue>({
   someTextInput: validate(required),
   nested: updateGroup<MyFormValue['nested']>({
     someNumber: validate(required, greaterThanOrEqualTo(2)),
@@ -293,7 +366,7 @@ const updateMyFormGroup = updateGroup<MyFormValue>({
 });
 ```
 
-The `updateMyFormGroup` function has a signature of `FormGroupState<MyFormValue> -> FormGroupState<MyFormValue>`. It takes a state, runs all validations, updates the errors, and returns the resulting state.
+The `validateMyForm` function has a signature of `FormGroupState<MyFormValue> -> FormGroupState<MyFormValue>`. It takes a state, runs all validations, updates the errors, and returns the resulting state.
 
 In addition, the `updateGroup` function allows specifying as many update function objects as you want and applies all of them after another. This is useful if you have dependencies between your update functions where one function's result may affect the result of another function. The following (contrived) example shows how to set the value of `someNumber` based on the `errors` of `someTextInput`.
 

docs/user-guide/validation.md

@@ -34,7 +34,7 @@ export interface MyFormValue {
   nested: NestedValue;
 }
 
-const updateMyFormGroup = updateGroup<MyFormValue>({
+const validateMyForm = updateGroup<MyFormValue>({
   someTextInput: validate(required),
   nested: updateGroup<NestedValue>({
     someNumber: validate(required, greaterThanOrEqualTo(2), lessThan(10)),