feat(codestyle): use action types for ngrx actions instead of factory…

… functions

- standardize payloads (always use payload object with typed properties)

Closes #25

src/app/app.component.ts

@@ -8,7 +8,12 @@ import { takeUntil } from 'rxjs/operators/takeUntil';
 import { map } from 'rxjs/operators/map';
 import { filter } from 'rxjs/operators/filter';
 
-import { login, logout, selectorAuth, routerTransition } from '@app/core';
+import {
+  ActionAuthLogin,
+  ActionAuthLogout,
+  selectorAuth,
+  routerTransition
+} from '@app/core';
 import { environment as env } from '@env/environment';
 
 import { selectorSettings } from './settings';
@@ -82,10 +87,10 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   onLoginClick() {
-    this.store.dispatch(login());
+    this.store.dispatch(new ActionAuthLogin());
   }
 
   onLogoutClick() {
-    this.store.dispatch(logout());
+    this.store.dispatch(new ActionAuthLogout());
   }
 }

src/app/core/auth/auth.effects.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
+import { Action } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { tap } from 'rxjs/operators/tap';
 
 import { LocalStorageService } from '../local-storage/local-storage.service';
-import { Action } from '../core.interfaces';
 
-import { AUTH_KEY, AUTH_LOGIN, AUTH_LOGOUT } from './auth.reducer';
+import { AUTH_KEY, AuthActionTypes } from './auth.reducer';
 
 @Injectable()
 export class AuthEffects {
@@ -18,7 +18,7 @@ export class AuthEffects {
   @Effect({ dispatch: false })
   login(): Observable<Action> {
     return this.actions$
-      .ofType(AUTH_LOGIN)
+      .ofType(AuthActionTypes.LOGIN)
       .pipe(
         tap(action =>
           this.localStorageService.setItem(AUTH_KEY, { isAuthenticated: true })
@@ -29,7 +29,7 @@ export class AuthEffects {
   @Effect({ dispatch: false })
   logout(): Observable<Action> {
     return this.actions$
-      .ofType(AUTH_LOGOUT)
+      .ofType(AuthActionTypes.LOGOUT)
       .pipe(
         tap(action =>
           this.localStorageService.setItem(AUTH_KEY, { isAuthenticated: false })

src/app/core/auth/auth.reducer.ts

@@ -1,26 +1,36 @@
-import { Action } from '../core.interfaces';
+import { Action } from '@ngrx/store';
+
+export const AUTH_KEY = 'AUTH';
+
+export enum AuthActionTypes {
+  LOGIN = '[Auth] Login',
+  LOGOUT = '[Auth] Logout'
+}
+
+export class ActionAuthLogin implements Action {
+  readonly type = AuthActionTypes.LOGIN;
+}
+
+export class ActionAuthLogout implements Action {
+  readonly type = AuthActionTypes.LOGOUT;
+}
+
+export type AuthActions = ActionAuthLogin | ActionAuthLogout;
 
 export const initialState = {
   isAuthenticated: false
 };
 
-export const AUTH_KEY = 'AUTH';
-export const AUTH_LOGIN = 'AUTH_LOGIN';
-export const AUTH_LOGOUT = 'AUTH_LOGOUT';
-
-export const login = () => ({ type: AUTH_LOGIN });
-export const logout = () => ({ type: AUTH_LOGOUT });
-
 export const selectorAuth = state => state.auth;
 
-export function authReducer(state = initialState, action: Action) {
+export function authReducer(state = initialState, action: AuthActions) {
   switch (action.type) {
-    case AUTH_LOGIN:
+    case AuthActionTypes.LOGIN:
       return Object.assign({}, state, {
         isAuthenticated: true
       });
 
-    case AUTH_LOGOUT:
+    case AuthActionTypes.LOGOUT:
       return Object.assign({}, state, {
         isAuthenticated: false
       });

src/app/core/index.ts

@@ -1,5 +1,4 @@
 export * from './local-storage/local-storage.service';
 export * from './animations/router.transition';
 export * from './auth/auth.reducer';
-export * from './core.interfaces';
 export * from './core.module';

src/app/examples/stock-market/stock-market.component.ts

@@ -3,7 +3,10 @@ import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import { takeUntil } from 'rxjs/operators/takeUntil';
 
-import { actionRetrieveStock, selectorStocks } from './stock-market.reducer';
+import {
+  ActionStockMarketRetrieve,
+  selectorStocks
+} from './stock-market.reducer';
 
 @Component({
   selector: 'anms-stock-market',
@@ -28,7 +31,9 @@ export class StockMarketComponent implements OnInit, OnDestroy {
 
         if (!this.initialized) {
           this.initialized = true;
-          this.store.dispatch(actionRetrieveStock(stocks.symbol));
+          this.store.dispatch(
+            new ActionStockMarketRetrieve({ symbol: stocks.symbol })
+          );
         }
       });
   }
@@ -39,6 +44,6 @@ export class StockMarketComponent implements OnInit, OnDestroy {
   }
 
   onSymbolChange(symbol: string) {
-    this.store.dispatch(actionRetrieveStock(symbol));
+    this.store.dispatch(new ActionStockMarketRetrieve({ symbol }));
   }
 }

src/app/examples/stock-market/stock-market.effects.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Action } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
@@ -9,13 +10,14 @@ import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
 import { switchMap } from 'rxjs/operators/switchMap';
 import { catchError } from 'rxjs/operators/catchError';
 
-import { LocalStorageService, Action } from '@app/core';
+import { LocalStorageService } from '@app/core';
 
 import {
+  ActionStockMarketRetrieve,
+  ActionStockMarketRetrieveError,
+  ActionStockMarketRetrieveSuccess,
   STOCK_MARKET_KEY,
-  STOCK_MARKET_RETRIEVE,
-  STOCK_MARKET_RETRIEVE_SUCCESS,
-  STOCK_MARKET_RETRIEVE_ERROR
+  StockMarketActionTypes
 } from './stock-market.reducer';
 import { StockMarketService } from './stock-market.service';
 
@@ -29,24 +31,23 @@ export class StockMarketEffects {
 
   @Effect()
   retrieveStock(): Observable<Action> {
-    return this.actions$.ofType(STOCK_MARKET_RETRIEVE).pipe(
-      tap(action =>
+    return this.actions$.ofType(StockMarketActionTypes.RETRIEVE).pipe(
+      tap((action: ActionStockMarketRetrieve) =>
         this.localStorageService.setItem(STOCK_MARKET_KEY, {
-          symbol: action.payload
+          symbol: action.payload.symbol
         })
       ),
       distinctUntilChanged(),
       debounceTime(500),
-      switchMap(action =>
-        this.service.retrieveStock(action.payload).pipe(
-          map(stock => ({
-            type: STOCK_MARKET_RETRIEVE_SUCCESS,
-            payload: stock
-          })),
-          catchError(err =>
-            of({ type: STOCK_MARKET_RETRIEVE_ERROR, payload: err })
+      switchMap((action: ActionStockMarketRetrieve) =>
+        this.service
+          .retrieveStock(action.payload.symbol)
+          .pipe(
+            map(stock => new ActionStockMarketRetrieveSuccess({ stock })),
+            catchError(error =>
+              of(new ActionStockMarketRetrieveError({ error }))
+            )
           )
-        )
       )
     );
   }

src/app/examples/stock-market/stock-market.reducer.ts

@@ -1,43 +1,65 @@
-import { Action } from '@app/core';
+import { Action } from '@ngrx/store';
+import { HttpErrorResponse } from '@angular/common/http';
+
+export const STOCK_MARKET_KEY = 'EXAMPLES.STOCKS';
+
+export enum StockMarketActionTypes {
+  RETRIEVE = '[Todos] Retrieve',
+  RETRIEVE_SUCCESS = '[Todos] Retrieve Success',
+  RETRIEVE_ERROR = '[Todos] Retrieve Error'
+}
+
+export class ActionStockMarketRetrieve implements Action {
+  readonly type = StockMarketActionTypes.RETRIEVE;
+  constructor(public payload: { symbol: string }) {}
+}
+
+export class ActionStockMarketRetrieveSuccess implements Action {
+  readonly type = StockMarketActionTypes.RETRIEVE_SUCCESS;
+  constructor(public payload: { stock: Stock }) {}
+}
+
+export class ActionStockMarketRetrieveError implements Action {
+  readonly type = StockMarketActionTypes.RETRIEVE_ERROR;
+  constructor(public payload: { error: HttpErrorResponse }) {}
+}
+
+export type StockMarketActions =
+  | ActionStockMarketRetrieve
+  | ActionStockMarketRetrieveSuccess
+  | ActionStockMarketRetrieveError;
 
 export const initialState = {
   symbol: 'GOOGL'
 };
 
-export const STOCK_MARKET_KEY = 'EXAMPLES.STOCKS';
-export const STOCK_MARKET_RETRIEVE = 'STOCK_MARKET_RETRIEVE';
-export const STOCK_MARKET_RETRIEVE_SUCCESS = 'STOCK_MARKET_RETRIEVE_SUCCESS';
-export const STOCK_MARKET_RETRIEVE_ERROR = 'STOCK_MARKET_RETRIEVE_ERROR';
-
-export const actionRetrieveStock = (symbol: string) => ({
-  type: STOCK_MARKET_RETRIEVE,
-  payload: symbol
-});
-
 export const selectorStocks = state => state.examples.stocks;
 
-export function stockMarketReducer(state = initialState, action: Action) {
+export function stockMarketReducer(
+  state = initialState,
+  action: StockMarketActions
+) {
   switch (action.type) {
-    case STOCK_MARKET_RETRIEVE:
+    case StockMarketActionTypes.RETRIEVE:
       return Object.assign({}, state, {
         loading: true,
         stock: null,
         error: null,
-        symbol: action.payload
+        symbol: action.payload.symbol
       });
 
-    case STOCK_MARKET_RETRIEVE_SUCCESS:
+    case StockMarketActionTypes.RETRIEVE_SUCCESS:
       return Object.assign({}, state, {
         loading: false,
-        stock: action.payload,
+        stock: action.payload.stock,
         error: null
       });
 
-    case STOCK_MARKET_RETRIEVE_ERROR:
+    case StockMarketActionTypes.RETRIEVE_ERROR:
       return Object.assign({}, state, {
         loading: false,
         stock: null,
-        error: action.payload
+        error: action.payload.error
       });
 
     default:

src/app/examples/todos/todos.component.ts

@@ -6,14 +6,14 @@ import { takeUntil } from 'rxjs/operators/takeUntil';
 import { ANIMATE_ON_ROUTE_ENTER } from '@app/core';
 
 import {
-  actionAddTodo,
-  actionPersistTodos,
-  actionToggleTodo,
-  actionRemoveDoneTodos,
-  actionFilterTodos,
+  ActionTodosAdd,
+  ActionTodosPersist,
+  ActionTodosFilter,
+  ActionTodosRemoveDone,
+  ActionTodosToggle,
   selectorTodos,
   Todo,
-  TodoFilter
+  TodosFilter
 } from './todos.reducer';
 
 @Component({
@@ -36,7 +36,7 @@ export class TodosComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.unsubscribe$))
       .subscribe(todos => {
         this.todos = todos;
-        this.store.dispatch(actionPersistTodos(todos));
+        this.store.dispatch(new ActionTodosPersist({ todos }));
       });
   }
 
@@ -72,19 +72,19 @@ export class TodosComponent implements OnInit, OnDestroy {
   }
 
   onAddTodo() {
-    this.store.dispatch(actionAddTodo(this.newTodo));
+    this.store.dispatch(new ActionTodosAdd({ name: this.newTodo }));
     this.newTodo = '';
   }
 
   onToggleTodo(todo: Todo) {
-    this.store.dispatch(actionToggleTodo(todo.id));
+    this.store.dispatch(new ActionTodosToggle({ id: todo.id }));
   }
 
   onRemoveDoneTodos() {
-    this.store.dispatch(actionRemoveDoneTodos());
+    this.store.dispatch(new ActionTodosRemoveDone());
   }
 
-  onFilterTodos(filter: TodoFilter) {
-    this.store.dispatch(actionFilterTodos(filter));
+  onFilterTodos(filter: TodosFilter) {
+    this.store.dispatch(new ActionTodosFilter({ filter }));
   }
 }

src/app/examples/todos/todos.effects.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
+import { Action } from '@ngrx/store';
 import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { tap } from 'rxjs/operators/tap';
 
-import { LocalStorageService, Action } from '@app/core';
+import { LocalStorageService } from '@app/core';
 
-import { TODOS_KEY, TODOS_PERSIST } from './todos.reducer';
+import {
+  ActionTodosPersist,
+  TODOS_KEY,
+  TodosActionTypes
+} from './todos.reducer';
 
 @Injectable()
 export class TodosEffects {
@@ -17,10 +22,10 @@ export class TodosEffects {
   @Effect({ dispatch: false })
   persistTodos(): Observable<Action> {
     return this.actions$
-      .ofType(TODOS_PERSIST)
+      .ofType(TodosActionTypes.PERSIST)
       .pipe(
-        tap(action =>
-          this.localStorageService.setItem(TODOS_KEY, action.payload)
+        tap((action: ActionTodosPersist) =>
+          this.localStorageService.setItem(TODOS_KEY, action.payload.todos)
         )
       );
   }