Add user Create flow

src/app/app.component.ts

@@ -11,6 +11,7 @@ export class AppComponent {
   static readonly api = {
     user: {
       retrieve: `api/user/retrieve`,
+      create: `api/user/create`,
     },
   };
 }

src/app/core/service/user/user.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {User, UserState} from "../../store/user/user.state";
+import { User, UserSaveDto } from '../../store/user/user.state';
 import {Observable} from "rxjs";
 import {AppComponent} from "../../../app.component";
 
@@ -14,4 +14,9 @@ export class UserService {
   retrieve(): Observable<User[]> {
     return this.httpClient.post<User[]>(AppComponent.api.user.retrieve, {});
   }
+
+  create(user: UserSaveDto): Observable<User> {
+    return this.httpClient.post<User>(AppComponent.api.user.create, user);
+  }
+
 }

src/app/core/store/user/user.actions.ts

@@ -1,9 +1,11 @@
 import {Action} from "@ngrx/store";
-import {User} from "./user.state";
+import { User, UserSaveDto } from './user.state';
 
 export enum UserActionType {
   Retrieve = '[User] Retrieve',
-  RetrieveSuccess = '[User] Retrieve Success'
+  RetrieveSuccess = '[User] Retrieve Success',
+  Create  = '[User] Create',
+  CreateSuccess  = '[User] Create Success'
 }
 
 export class UserRetrieveAction implements Action {
@@ -14,3 +16,13 @@ export class UserRetrieveSuccessAction implements Action {
   readonly type = UserActionType.RetrieveSuccess;
   constructor(public data: User[]){}
 }
+
+export class UserCreateAction implements Action {
+  readonly type = UserActionType.Create;
+  constructor(public user: UserSaveDto) {}
+}
+
+export class UserCreateSuccessAction implements Action {
+  readonly type = UserActionType.CreateSuccess;
+  constructor(public user: User){}
+}

src/app/core/store/user/user.effects.ts

@@ -3,7 +3,7 @@ import {UserService} from "../../service/user/user.service";
 import {Actions, createEffect, ofType} from "@ngrx/effects";
 import {Observable, of} from "rxjs";
 import {Action} from "@ngrx/store";
-import {UserActionType, UserRetrieveSuccessAction} from "./user.actions";
+import { UserActionType, UserCreateAction, UserCreateSuccessAction, UserRetrieveSuccessAction } from './user.actions';
 import {catchError, map, switchMap} from "rxjs/operators";
 import {ErrorAction} from "../error/error.actions";
 
@@ -22,4 +22,16 @@ export class UserEffects {
       })
     );
   });
+
+  create$: Observable<Action> = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(UserActionType.Create),
+      switchMap((action: UserCreateAction) => {
+        return this.service.create(action.user).pipe(
+          map(response => new UserCreateSuccessAction(response)),
+          catchError(error => of(new ErrorAction(error)))
+        );
+      })
+    );
+  });
 }

src/app/core/store/user/user.facade.ts

@@ -3,8 +3,8 @@ import {Store} from "@ngrx/store";
 import {AppState} from "../app.state";
 import {Observable} from "rxjs";
 import {userStateSelector} from "./user.selector";
-import {UserRetrieveAction} from "./user.actions";
-import {UserState} from "./user.state";
+import { UserCreateAction, UserRetrieveAction } from './user.actions';
+import { UserSaveDto, UserState } from './user.state';
 
 @Injectable({ providedIn: 'root' })
 export class UserFacade {
@@ -14,6 +14,10 @@ export class UserFacade {
     this.store.dispatch(new UserRetrieveAction());
   }
 
+  dispatchCreate(user: UserSaveDto): void {
+    this.store.dispatch(new UserCreateAction(user));
+  }
+
   retrieve(): Observable<UserState> {
     return this.store.select(userStateSelector);
   }

src/app/core/store/user/user.reducer.ts

@@ -1,16 +1,20 @@
-import {initialUserState, UserState} from "./user.state";
-import {UserActionType, UserRetrieveSuccessAction} from "./user.actions";
-import {Action} from "@ngrx/store";
+import {initialUserState, UserState} from './user.state';
+import { UserActionType, UserCreateSuccessAction, UserRetrieveSuccessAction } from './user.actions';
+import {Action} from '@ngrx/store';
 
 export function userReducer(
   state: UserState = initialUserState,
   action: Action
 ): UserState {
-  switch(action.type){
+  switch (action.type){
     case UserActionType.Retrieve:
       return initialUserState;
     case UserActionType.RetrieveSuccess:
-      return handleUserRetrieveSuccessAction(state, <UserRetrieveSuccessAction>action);
+      return handleUserRetrieveSuccessAction(state, action as UserRetrieveSuccessAction);
+    case UserActionType.Create:
+      return state;
+    case UserActionType.CreateSuccess:
+      return handleUserCreateSuccessAction(state, action as UserCreateSuccessAction);
     default:
       return state;
   }
@@ -23,5 +27,15 @@ function handleUserRetrieveSuccessAction(
   return {
     ...state,
     data: action.data
-  }
+  };
+}
+
+function handleUserCreateSuccessAction(
+  state: UserState,
+  action: UserCreateSuccessAction,
+): UserState {
+  return {
+    ...state,
+    data: [...state.data, action.user]
+  };
 }

src/app/core/store/user/user.state.ts

@@ -9,6 +9,13 @@ export interface User {
   updated: string;
 }
 
+export interface UserSaveDto {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  phoneNumber: string;
+}
+
 export const initialUserState: UserState = {
   data: []
 };