Add api demos and make action names clearer

src/index.tsx

@@ -5,20 +5,35 @@ import { Provider } from 'react-redux';
 
 import { reducers } from './state';
 import * as WorkloadActions from './state/workloads/actions';
+import { WorkloadService } from './state/workloads/services';
 
 import './index.css';
 import App from './App';
 
 
+// demo store
+
 const store = createStore(reducers);
 
 store.subscribe(() => {
-  console.log(store.getState().workloads[0]);
+  console.log('store workload[0]', store.getState().workloads[0]);
 });
 
 store.dispatch(WorkloadActions.submit({ complexity: 100 }));
-store.dispatch(WorkloadActions.create({ workloadId: 0, complexity: 100, completeDate: new Date() }));
+store.dispatch(WorkloadActions.created({ id: 0, complexity: 100, completeDate: new Date() }));
-store.dispatch(WorkloadActions.updateStatus({ workloadId: 0, status: 'SUCCESS' }));
+store.dispatch(WorkloadActions.cancel({ id: 0 }));
+store.dispatch(WorkloadActions.updateStatus({ id: 0, status: 'SUCCESS' }));
+
+
+// demo workloadService
+
+const workloadService = new WorkloadService();
+
+workloadService.create({ complexity: 100 }).then(console.log.bind(console, 'create'));
+workloadService.cancel({ id: 0 }).then(console.log.bind(console, 'cancel'));
+
+workloadService.create({ complexity: 200 }).then(console.log.bind(console, 'create'));
+workloadService.checkStatus({ id: 1 }).then(console.log.bind(console, 'checkStatus'));
 
 
 ReactDOM.render(

src/state/workloads/actions.ts

@@ -6,26 +6,26 @@ export type Action = {
     complexity: number;
   };
 } | {
-  type: 'WORKLOAD_CREATE';
+  type: 'WORKLOAD_CREATED';
   payload: {
-    workloadId: number;
+    id: number;
     complexity: number;
     completeDate: Date;
   };
 } | {
   type: 'WORKLOAD_CANCEL';
   payload: {
-    workloadId: number;
+    id: number;
   };
 } | {
   type: 'WORKLOAD_CHECK_STATUS';
   payload: {
-    workloadId: number;
+    id: number;
   };
 } | {
   type: 'WORKLOAD_UPDATE_STATUS';
   payload: {
-    workloadId: number;
+    id: number;
     status: Status;
   };
 };
@@ -37,33 +37,33 @@ export const submit = ({ complexity }: { complexity: number }): Action => ({
   },
 });
 
-export const create = ({ workloadId, complexity, completeDate }: { workloadId: number, complexity: number, completeDate: Date }): Action => ({
+export const created = ({ id, complexity, completeDate }: { id: number, complexity: number, completeDate: Date }): Action => ({
-  type: 'WORKLOAD_CREATE',
+  type: 'WORKLOAD_CREATED',
   payload: {
-    workloadId,
+    id,
     completeDate, 
     complexity,
   },
 });
 
-export const cancel = ({ workloadId }: { workloadId: number }): Action => ({
+export const cancel = ({ id }: { id: number }): Action => ({
   type: 'WORKLOAD_CANCEL',
   payload: {
-    workloadId,
+    id,
   },
 });
 
-export const checkStatus = ({ workloadId }: { workloadId: number }): Action => ({
+export const checkStatus = ({ id }: { id: number }): Action => ({
   type: 'WORKLOAD_CHECK_STATUS',
   payload: {
-    workloadId,
+    id,
   },
 });
 
-export const updateStatus = ({ workloadId, status }: { workloadId: number, status: Status }): Action => ({
+export const updateStatus = ({ id, status }: { id: number, status: Status }): Action => ({
   type: 'WORKLOAD_UPDATE_STATUS',
   payload: {
-    workloadId,
+    id,
     status,
   },
 });

src/state/workloads/reducers.ts

@@ -16,10 +16,10 @@ const initialState: Store = {};
 
 export const reducer = (state: Store = initialState, action: Action): Store => {
   switch (action.type) {
-    case 'WORKLOAD_CREATE':            
+    case 'WORKLOAD_CREATED':            
       return { 
-        [action.payload.workloadId]: {
+        [action.payload.id]: {
-          id: action.payload.workloadId,
+          id: action.payload.id,
           completeDate: action.payload.completeDate,
           status: 'WORKING',
         },
@@ -27,16 +27,16 @@ export const reducer = (state: Store = initialState, action: Action): Store => {
 
       case 'WORKLOAD_CANCEL': 
         return {
-          [action.payload.workloadId]: {
+          [action.payload.id]: {
-            ...state[action.payload.workloadId],
+            ...state[action.payload.id],
             status: 'CANCELED',
           },
         }
       
       case 'WORKLOAD_UPDATE_STATUS': 
         return {
-          [action.payload.workloadId]: {
+          [action.payload.id]: {
-            ...state[action.payload.workloadId],
+            ...state[action.payload.id],
             status: action.payload.status,
           },
         }