Upgrade action typing with typesafe-actions

src/state/actions.ts

@@ -1,10 +0,0 @@
-import * as WorkloadsActions from './workloads/actions';
-import { Action as WorkloadsAction } from './workloads/actions';
-
-export type Action = WorkloadsAction;
-
-export const Actions = { 
-  WorkloadsActions,
-};
-
-export default Actions;

src/state/epics.ts

@@ -4,4 +4,4 @@ import { epics as workloadsEpics } from './workloads';
 
 export const epics = combineEpics(workloadsEpics);
 
-export default epics;
+export default epics;

src/state/index.ts

@@ -1,3 +1,2 @@
 export * from './reducer';
-export * from './actions';
-export * from './epics';
+export * from './epics';

src/state/reducer.ts

@@ -1,17 +1,16 @@
 import { combineReducers } from 'redux';
 
-import { Action } from './actions';
-
-import { 
-  State as WorkloadsState, 
-  reducer as workloadReducer,
-} from './workloads';
+import { WorkloadsAction, WorkloadsState, workloadReducer } from './workloads';
 
 
-export interface State {
+export type RootAction = 
+  | WorkloadsAction;
+
+export interface RootState {
   workloads: WorkloadsState;
 }
 
-export const reducer = combineReducers<State, Action>({
+
+export const reducer = combineReducers<RootState, RootAction>({
   workloads: workloadReducer,
 });

src/state/workloads/actions.ts

@@ -1,60 +1,21 @@
+import { createAction } from 'typesafe-actions';
+
 import { Status } from './types';
+import { SUBMIT, CREATED, CANCEL, UPDATE_STATUS } from './constants';
 
-export type Action = {
-  type: 'WORKLOAD_SUBMIT';
-  payload: {
-    complexity: number;
-  };
-} | {
-  type: 'WORKLOAD_CREATED';
-  payload: {
-    id: number;
-    complexity: number;
-    completeDate: Date;
-    status: Status;
-  };
-} | {
-  type: 'WORKLOAD_CANCEL';
-  payload: {
-    id: number;
-  };
-} | {
-  type: 'WORKLOAD_UPDATE_STATUS';
-  payload: {
-    id: number;
-    status: Status;
-  };
-};
 
-export const submit = ({ complexity }: { complexity: number }): Action => ({
-  type: 'WORKLOAD_SUBMIT',
-  payload: {
-    complexity,
-  },
-});
+export const submit = createAction(SUBMIT, resolve => (params: { complexity: number }) => resolve({ complexity: params.complexity }));
 
-export const created = ({ id, status, complexity, completeDate }: { id: number, status: Status, complexity: number, completeDate: Date }): Action => ({
-  type: 'WORKLOAD_CREATED',
-  payload: {
-    id,
-    status,
-    completeDate, 
-    complexity,
-  },
-});
+export const created = createAction(CREATED, resolve =>
+  (params: { id: number, status: Status, complexity: number, completeDate: Date }) => resolve({
+    id: params.id,
+    status: params.status,
+    completeDate: params.completeDate,
+    complexity: params.complexity,
+  }));
 
-export const cancel = ({ id }: { id: number }): Action => ({
-  type: 'WORKLOAD_CANCEL',
-  payload: {
-    id,
-  },
-});
+export const cancel = createAction(CANCEL, resolve => (params: { id: number }) => resolve({ id: params.id }));
 
-export const updateStatus = ({ id, status }: { id: number, status: Status }): Action => ({
-  type: 'WORKLOAD_UPDATE_STATUS',
-  payload: {
-    id,
-    status,
-  },
-});
+export const updateStatus = createAction(UPDATE_STATUS, resolve =>
+  (params: { id: number, status: Status }) => resolve({ id: params.id, status: params.status }))
 

src/state/workloads/constants.ts

@@ -0,0 +1,4 @@
+export const SUBMIT = 'workload/SUBMIT';
+export const CREATED = 'workload/CREATED';
+export const CANCEL = 'workload/CANCEL';
+export const UPDATE_STATUS = 'workload/UPDATE_STATUS';

src/state/workloads/epics.ts

@@ -1,11 +1,12 @@
 import { combineEpics, Epic, ofType } from 'redux-observable';
-import { map, tap, ignoreElements } from 'rxjs/operators';
+import { filter, map, tap, ignoreElements } from 'rxjs/operators';
+import { isActionOf } from 'typesafe-actions';
 
-import { Action } from '../actions';
-import { State } from '../reducer';
+import { RootAction, RootState } from '../reducer';
+import * as workloadsActions from './actions';
 
 
-type AppEpic = Epic<Action, Action, State>;
+type AppEpic = Epic<RootAction, RootAction, RootState>;
 
 
 // import { WorkloadService } from './services';
@@ -16,7 +17,7 @@ type AppEpic = Epic<Action, Action, State>;
 
 const logWorkloadSubmissions: AppEpic = (action$, state$) => (
   action$.pipe(
-    ofType('WORKLOAD_SUBMIT'),
+    filter(isActionOf(workloadsActions.submit)),
     map(action => action.payload),
     tap((payload) => console.log('Workload submitted', payload)),
     ignoreElements(),

src/state/workloads/reducer.ts

@@ -1,23 +1,29 @@
-import { Action } from './actions';
-import { Status } from './types';
+import { ActionType, getType } from 'typesafe-actions';
 
-interface Entry<Id extends number> {
+import { Status } from './types';
+import * as workloadActions from './actions';
+
+
+export type WorkloadsAction = ActionType<typeof workloadActions>
+
+
+interface WorkloadEntry<Id extends number> {
   id: Id;
   complexity: number;
   completeDate: Date;
   status: Status;
 }
 
-export type State = { 
-  [Id in number]: Entry<Id>;
+export type WorkloadsState = {
+  [Id in number]: WorkloadEntry<Id>;
 };
   
 
-const initialState: State = {};
+const initialState: WorkloadsState = {};
 
-export const reducer = (state: State = initialState, action: Action): State => {
+export const workloadReducer = (state: WorkloadsState = initialState, action: WorkloadsAction): WorkloadsState => {
   switch (action.type) {
-    case 'WORKLOAD_CREATED':            
+    case getType(workloadActions.created):
       return { 
         ...state,
         [action.payload.id]: {
@@ -28,7 +34,7 @@ export const reducer = (state: State = initialState, action: Action): State => {
         },
       };
       
-      case 'WORKLOAD_UPDATE_STATUS': 
+      case getType(workloadActions.updateStatus):
         return {
           ...state,
           [action.payload.id]: {