convert AuthActions

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,4 +1,7 @@
-import * as AuthActions from './auth.actions';
+import {
+  AuthActions,
+  AuthActionTypes,
+} from '@example-app/auth/actions/auth.actions';
 import {
   AuthApiActions,
   AuthApiActionTypes,
@@ -10,6 +13,7 @@ import {
 
 export {
   AuthActions,
+  AuthActionTypes,
   AuthApiActions,
   AuthApiActionTypes,
   LoginPageActions,

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

@@ -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,6 +7,7 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import {
   LoginPageActions,
   AuthActions,
+  AuthActionTypes,
   AuthApiActions,
   AuthApiActionTypes,
   LoginPageActionTypes,
@@ -38,18 +39,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,
@@ -61,9 +59,7 @@ export class AuthEffects {
     }),
     map(
       result =>
-        result
-          ? new AuthActions.Logout()
-          : new AuthActions.LogoutConfirmationDismiss()
+        result ? AuthActions.logout() : AuthActions.logoutConfirmationDismiss()
     )
   );
 

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/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());
   }
 }