refactor(example-app): use action creators

projects/example-app/src/app/auth/actions/auth-api.actions.ts

@@ -1,7 +1,7 @@
 import { ActionsUnion, createAction } from '@ngrx/store';
 import { User } from '@example-app/auth/models/user';
 
-export const enum AuthApiActionTypes {
+export enum AuthApiActionTypes {
   LoginSuccess = '[Auth/API] Login Success',
   LoginFailure = '[Auth/API] Login Failure',
   LoginRedirect = '[Auth/API] Login Redirect',
@@ -16,23 +16,3 @@ export const AuthApiActions = {
 };
 
 export type AuthApiActions = ActionsUnion<typeof AuthApiActions>;
-
-/*
-export class LoginSuccess implements Action {
-  readonly type = AuthApiActionTypes.LoginSuccess;
-
-  constructor(public payload: { user: User }) {}
-}
-
-export class LoginFailure implements Action {
-  readonly type = AuthApiActionTypes.LoginFailure;
-
-  constructor(public payload: { error: any }) {}
-}
-
-export class LoginRedirect implements Action {
-  readonly type = AuthApiActionTypes.LoginRedirect;
-}
-
-export type AuthApiActionsUnion = LoginSuccess | LoginFailure | LoginRedirect;
-*/

projects/example-app/src/app/auth/actions/auth.actions.ts

@@ -1,24 +1,16 @@
-import { Action } from '@ngrx/store';
+import { Action, ActionsUnion, createAction } from '@ngrx/store';
 
 export enum AuthActionTypes {
   Logout = '[Auth] Logout',
   LogoutConfirmation = '[Auth] Logout Confirmation',
   LogoutConfirmationDismiss = '[Auth] Logout Confirmation Dismiss',
 }
 
-export class Logout implements Action {
-  readonly type = AuthActionTypes.Logout;
-}
-
-export class LogoutConfirmation implements Action {
-  readonly type = AuthActionTypes.LogoutConfirmation;
-}
-
-export class LogoutConfirmationDismiss implements Action {
-  readonly type = AuthActionTypes.LogoutConfirmationDismiss;
-}
+export const AuthActions = {
+  logout: () => createAction(AuthActionTypes.Logout),
+  logoutConfirmation: () => createAction(AuthActionTypes.LogoutConfirmation),
+  logoutConfirmationDismiss: () =>
+    createAction(AuthActionTypes.LogoutConfirmationDismiss),
+};
 
-export type AuthActionsUnion =
-  | Logout
-  | LogoutConfirmation
-  | LogoutConfirmationDismiss;
+export type AuthActions = ActionsUnion<typeof AuthActions>;

projects/example-app/src/app/auth/actions/index.ts

@@ -1,8 +1,12 @@
-import * as AuthActions from './auth.actions';
-import {
+import { AuthActions, AuthActionTypes } from './auth.actions';
+import { AuthApiActions, AuthApiActionTypes } from './auth-api.actions';
+import { LoginPageActions, LoginPageActionTypes } from './login-page.actions';
+
+export {
+  AuthActions,
+  AuthActionTypes,
   AuthApiActions,
   AuthApiActionTypes,
-} from '@example-app/auth/actions/auth-api.actions';
-import * as LoginPageActions from './login-page.actions';
-
-export { AuthActions, AuthApiActions, AuthApiActionTypes, LoginPageActions };
+  LoginPageActions,
+  LoginPageActionTypes,
+};

projects/example-app/src/app/auth/actions/login-page.actions.ts

@@ -1,14 +1,13 @@
-import { Action } from '@ngrx/store';
+import { ActionsUnion, createAction } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models/user';
 
 export enum LoginPageActionTypes {
   Login = '[Login Page] Login',
 }
 
-export class Login implements Action {
-  readonly type = LoginPageActionTypes.Login;
+export const LoginPageActions = {
+  login: (credentials: Credentials) =>
+    createAction(LoginPageActionTypes.Login, { credentials }),
+};
 
-  constructor(public payload: { credentials: Credentials }) {}
-}
-
-export type LoginPageActionsUnion = Login;
+export type LoginPageActions = ActionsUnion<typeof LoginPageActions>;

projects/example-app/src/app/auth/containers/login-page.component.spec.ts

@@ -57,7 +57,7 @@ describe('Login Page', () => {
 
   it('should dispatch a login event on submit', () => {
     const credentials: any = {};
-    const action = new LoginPageActions.Login({ credentials });
+    const action = LoginPageActions.login(credentials);
 
     instance.onSubmit(credentials);
 

projects/example-app/src/app/auth/containers/login-page.component.ts

@@ -24,6 +24,6 @@ export class LoginPageComponent implements OnInit {
   ngOnInit() {}
 
   onSubmit(credentials: Credentials) {
-    this.store.dispatch(new LoginPageActions.Login({ credentials }));
+    this.store.dispatch(LoginPageActions.login(credentials));
   }
 }

projects/example-app/src/app/auth/effects/auth.effects.spec.ts

@@ -57,7 +57,7 @@ describe('AuthEffects', () => {
     it('should return an auth.LoginSuccess action, with user information if login succeeds', () => {
       const credentials: Credentials = { username: 'test', password: '' };
       const user = { name: 'User' } as User;
-      const action = new LoginPageActions.Login({ credentials });
+      const action = LoginPageActions.login(credentials);
       const completion = AuthApiActions.loginSuccess(user);
 
       actions$ = hot('-a---', { a: action });
@@ -70,7 +70,7 @@ describe('AuthEffects', () => {
 
     it('should return a new auth.LoginFailure if the login service throws', () => {
       const credentials: Credentials = { username: 'someOne', password: '' };
-      const action = new LoginPageActions.Login({ credentials });
+      const action = LoginPageActions.login(credentials);
       const completion = AuthApiActions.loginFailure(
         'Invalid username or password'
       );
@@ -112,7 +112,7 @@ describe('AuthEffects', () => {
     });
 
     it('should dispatch a RouterNavigation action when auth.Logout is dispatched', (done: any) => {
-      const action = new AuthActions.Logout();
+      const action = AuthActions.logout();
 
       actions$ = of(action);
 
@@ -125,8 +125,8 @@ describe('AuthEffects', () => {
 
   describe('logoutConfirmation$', () => {
     it('should dispatch a Logout action if dialog closes with true result', () => {
-      const action = new AuthActions.LogoutConfirmation();
-      const completion = new AuthActions.Logout();
+      const action = AuthActions.logoutConfirmation();
+      const completion = AuthActions.logout();
 
       actions$ = hot('-a', { a: action });
       const expected = cold('-b', { b: completion });
@@ -139,8 +139,8 @@ describe('AuthEffects', () => {
     });
 
     it('should dispatch a LogoutConfirmationDismiss action if dialog closes with falsy result', () => {
-      const action = new AuthActions.LogoutConfirmation();
-      const completion = new AuthActions.LogoutConfirmationDismiss();
+      const action = AuthActions.logoutConfirmation();
+      const completion = AuthActions.logoutConfirmationDismiss();
 
       actions$ = hot('-a', { a: action });
       const expected = cold('-b', { b: completion });

projects/example-app/src/app/auth/effects/auth.effects.ts

@@ -7,8 +7,10 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import {
   LoginPageActions,
   AuthActions,
+  AuthActionTypes,
   AuthApiActions,
   AuthApiActionTypes,
+  LoginPageActionTypes,
 } from '@example-app/auth/actions';
 import { Credentials } from '@example-app/auth/models/user';
 import { AuthService } from '@example-app/auth/services/auth.service';
@@ -18,11 +20,10 @@ import { LogoutConfirmationDialogComponent } from '@example-app/auth/components/
 export class AuthEffects {
   @Effect()
   login$ = this.actions$.pipe(
-    ofType(LoginPageActions.LoginPageActionTypes.Login),
-    map(action => action.payload.credentials),
+    ofType(LoginPageActionTypes.Login),
+    map(action => action.credentials),
     exhaustMap((auth: Credentials) =>
       this.authService.login(auth).pipe(
-        // map(user => AuthApiActions.AuthApiActions.loginSuccess(user)),
         map(AuthApiActions.loginSuccess),
         catchError(error => of(AuthApiActions.loginFailure(error)))
       )
@@ -37,18 +38,15 @@ export class AuthEffects {
 
   @Effect({ dispatch: false })
   loginRedirect$ = this.actions$.pipe(
-    ofType(
-      AuthApiActionTypes.LoginRedirect,
-      AuthActions.AuthActionTypes.Logout
-    ),
+    ofType(AuthApiActionTypes.LoginRedirect, AuthActionTypes.Logout),
     tap(authed => {
       this.router.navigate(['/login']);
     })
   );
 
   @Effect()
   logoutConfirmation$ = this.actions$.pipe(
-    ofType(AuthActions.AuthActionTypes.LogoutConfirmation),
+    ofType(AuthActionTypes.LogoutConfirmation),
     exhaustMap(() => {
       const dialogRef = this.dialog.open<
         LogoutConfirmationDialogComponent,
@@ -60,14 +58,12 @@ export class AuthEffects {
     }),
     map(
       result =>
-        result
-          ? new AuthActions.Logout()
-          : new AuthActions.LogoutConfirmationDismiss()
+        result ? AuthActions.logout() : AuthActions.logoutConfirmationDismiss()
     )
   );
 
   constructor(
-    private actions$: Actions<LoginPageActions.LoginPageActionsUnion>,
+    private actions$: Actions<LoginPageActions>,
     private authService: AuthService,
     private router: Router,
     private dialog: MatDialog

projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts

@@ -42,7 +42,7 @@ describe('AuthReducer', () => {
       const initialState = {
         user: { name: 'test' },
       } as fromAuth.State;
-      const createAction = new AuthActions.Logout();
+      const createAction = AuthActions.logout();
 
       const expectedResult = fromAuth.initialState;
 

projects/example-app/src/app/auth/reducers/auth.reducer.ts

@@ -1,5 +1,6 @@
 import {
   AuthActions,
+  AuthActionTypes,
   AuthApiActions,
   AuthApiActionTypes,
 } from '@example-app/auth/actions';
@@ -15,7 +16,7 @@ export const initialState: State = {
 
 export function reducer(
   state = initialState,
-  action: AuthApiActions | AuthActions.AuthActionsUnion
+  action: AuthApiActions | AuthActions
 ): State {
   switch (action.type) {
     case AuthApiActionTypes.LoginSuccess: {
@@ -25,7 +26,7 @@ export function reducer(
       };
     }
 
-    case AuthActions.AuthActionTypes.Logout: {
+    case AuthActionTypes.Logout: {
       return initialState;
     }
 

projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts

@@ -19,7 +19,7 @@ describe('LoginPageReducer', () => {
   describe('LOGIN', () => {
     it('should make pending to true', () => {
       const user = { username: 'test' } as Credentials;
-      const createAction = new LoginPageActions.Login({ credentials: user });
+      const createAction = LoginPageActions.login(user);
 
       const expectedResult = {
         error: null,

projects/example-app/src/app/auth/reducers/login-page.reducer.ts

@@ -2,6 +2,7 @@ import {
   AuthApiActions,
   AuthApiActionTypes,
   LoginPageActions,
+  LoginPageActionTypes,
 } from '@example-app/auth/actions';
 
 export interface State {
@@ -16,10 +17,10 @@ export const initialState: State = {
 
 export function reducer(
   state = initialState,
-  action: AuthApiActions | LoginPageActions.LoginPageActionsUnion
+  action: AuthApiActions | LoginPageActions
 ): State {
   switch (action.type) {
-    case LoginPageActions.LoginPageActionTypes.Login: {
+    case LoginPageActionTypes.Login: {
       return {
         ...state,
         error: null,

projects/example-app/src/app/core/containers/app.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
-import * as AuthActions from '@example-app/auth/actions/auth.actions';
+import { AuthActions } from '@example-app/auth/actions';
 import * as fromAuth from '@example-app/auth/reducers';
 import * as fromRoot from '@example-app/reducers';
 import { LayoutActions } from '@example-app/core/actions';
@@ -64,6 +64,6 @@ export class AppComponent {
   logout() {
     this.closeSidenav();
 
-    this.store.dispatch(new AuthActions.LogoutConfirmation());
+    this.store.dispatch(AuthActions.logoutConfirmation());
   }
 }