From d9110fb8edbe09d277267be5d1b8d433a05c06d0 Mon Sep 17 00:00:00 2001
From: rjz <rj@rjzaworski.com>
Date: Mon, 4 Sep 2017 16:41:42 -0700
Subject: [PATCH 1/3] Fix demo paths

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 6e19502..c380b58 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,11 @@ <h1>Counter Demo</h1>
         ...and <a href="javascript:window.location.reload()">refresh</a> this page!
       </div>
     </div>
-    <script src="node_modules/react/dist/react.js"></script>
-    <script src="node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="node_modules/react/dist/react.min.js"></script>
+    <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
     <script src="dist/bundle.js"></script>
 
-    <link rel="stylesheet" href="node_modules/zakalwe/zakalwe.css" />
+    <link rel="stylesheet" href="node_modules/zakalwe/zakalwe.min.css" />
 <style>
 .demo {
   display: flex;
@@ -87,7 +87,7 @@ <h1>Counter Demo</h1>
     <section class="container copyright">
       Another unrepentant production from
       <a href="https://rjzaworski.com">rj zaworski</a>
-      &middot; <a href="https://github.com/rjz/typescript-react-redux">source code</a>
+      &middot; <a href="https://github.com/rjz/typescript-react-redux">source</a>
       <!-- :^) -->
     </section>
   </footer>

From c97ee82c37d77af9e10eea7fb6b5f29fd91b34e5 Mon Sep 17 00:00:00 2001
From: rjz <rj@rjzaworski.com>
Date: Mon, 4 Sep 2017 09:58:59 -0700
Subject: [PATCH 2/3] Demonstrates partial actions

---
 src/actions/__tests__/index_spec.ts  | 108 +++++++++++++--------------
 src/actions/index.ts                 |  58 ++++----------
 src/api.ts                           |   8 +-
 src/reducers/__tests__/index_spec.ts |   2 +-
 src/reducers/index.ts                |  39 ++++------
 5 files changed, 86 insertions(+), 129 deletions(-)

diff --git a/src/actions/__tests__/index_spec.ts b/src/actions/__tests__/index_spec.ts
index 6354ad9..d6c6ee0 100644
--- a/src/actions/__tests__/index_spec.ts
+++ b/src/actions/__tests__/index_spec.ts
@@ -6,6 +6,37 @@ import * as actions from '../index'
 
 const api: jest.Mocked<apiExports.Api> = apiExports.api as any
 
+const eventually = (assertFn) =>
+  new Promise((resolve, reject) => {
+    setTimeout(() => {
+      try {
+        assertFn()
+      } catch (e) {
+        return reject(e)
+      }
+      resolve()
+    }, 1)
+  })
+
+const expectRequest = (type, request, apiAction) => {
+  expect(apiAction.type).toEqual(type)
+  expect(apiAction.request).toEqual(request)
+  expect(apiAction.error).toBeUndefined()
+  expect(apiAction.response).toBeUndefined()
+}
+
+const expectResponse = (type, response, apiAction) => {
+  expect(apiAction.type).toEqual(type)
+  expect(apiAction.response).toEqual(response)
+  expect(apiAction.response).not.toBeUndefined()
+}
+
+const expectError = (type, error, apiAction) => {
+  expect(apiAction.type).toEqual(type)
+  expect(apiAction.response).toBeUndefined()
+  expect(apiAction.error).toEqual(error)
+}
+
 describe('actions', () => {
   const store = () => {
     const reducer = jest.fn()
@@ -14,25 +45,9 @@ describe('actions', () => {
     return { dispatch, reducer }
   }
 
-  const eventually = (assertFn) =>
-    new Promise((resolve, reject) => {
-      setTimeout(() => {
-        try {
-          assertFn()
-        } catch (e) {
-          return reject(e)
-        }
-        resolve()
-      }, 1)
-    })
-
-  const expectTypes = (reducer, types) =>
-    () =>
-      expect(reducer.mock.calls.map(x => x[1].type)).toEqual(types)
-
   describe('.saveCount', () => {
     beforeEach(() => {
-      api.save.mockReturnValue(Promise.resolve(null))
+      api.save.mockReturnValue(Promise.resolve({}))
     })
 
     it('sends an API request', () => {
@@ -41,13 +56,14 @@ describe('actions', () => {
     })
 
     describe('when API request succeeds', () => {
-      it('dispatches SAVE_COUNT_SUCCESS', () => {
+      it('fills out SAVE_COUNT', () => {
         const { dispatch, reducer } = store()
         actions.saveCount({ value: 14 })(dispatch)
-        return eventually(expectTypes(reducer, [
-          'SAVE_COUNT_REQUEST',
-          'SAVE_COUNT_SUCCESS',
-        ]))
+        return eventually(() => {
+          const actions = reducer.mock.calls.map(x => x[1])
+          expectRequest('SAVE_COUNT', { value: 14 }, actions[0])
+          expectResponse('SAVE_COUNT', {}, actions[1])
+        })
       })
     })
 
@@ -59,26 +75,11 @@ describe('actions', () => {
       it('dispatches SAVE_COUNT_ERROR', () => {
         const { dispatch, reducer } = store()
         actions.saveCount({ value: 14 })(dispatch)
-        return eventually(expectTypes(reducer, [
-          'SAVE_COUNT_REQUEST',
-          'SAVE_COUNT_ERROR',
-        ]))
-      })
 
-      it('includes error message with SAVE_COUNT_ERROR', () => {
-        const { dispatch, reducer } = store()
-        actions.saveCount({ value: 14 })(dispatch)
         return eventually(() => {
-          expect(reducer.mock.calls[1][1].error.message)
-            .toEqual('something terrible happened')
-        })
-      })
-
-      it('includes request with SAVE_COUNT_ERROR for convenience', () => {
-        const { dispatch, reducer } = store()
-        actions.saveCount({ value: 14 })(dispatch)
-        return eventually(() => {
-          expect(reducer.mock.calls[1][1].request).toEqual({ value: 14 })
+          const actions = reducer.mock.calls.map(x => x[1])
+          expectRequest('SAVE_COUNT', { value: 14 }, actions[0])
+          expectError('SAVE_COUNT', 'Error: something terrible happened', actions[1])
         })
       })
     })
@@ -95,13 +96,15 @@ describe('actions', () => {
     })
 
     describe('when API request succeeds', () => {
-      it('dispatches LOAD_COUNT_SUCCESS', () => {
+      it('fills out LOAD_COUNT .response', () => {
         const { dispatch, reducer } = store()
         actions.loadCount()(dispatch)
-        return eventually(expectTypes(reducer, [
-          'LOAD_COUNT_REQUEST',
-          'LOAD_COUNT_SUCCESS',
-        ]))
+
+        return eventually(() => {
+          const actions = reducer.mock.calls.map(x => x[1])
+          expectRequest('LOAD_COUNT', undefined, actions[0])
+          expectResponse('LOAD_COUNT', { value: 14 }, actions[1])
+        })
       })
 
       it('includes new value with LOAD_COUNT_SUCCESS', () => {
@@ -118,21 +121,14 @@ describe('actions', () => {
         api.load.mockReturnValue(Promise.reject(new Error('something terrible happened')))
       })
 
-      it('dispatches LOAD_COUNT_ERROR', () => {
+      it('fills out LOAD_COUNT .error', () => {
         const { dispatch, reducer } = store()
         actions.loadCount()(dispatch)
-        return eventually(expectTypes(reducer, [
-          'LOAD_COUNT_REQUEST',
-          'LOAD_COUNT_ERROR',
-        ]))
-      })
 
-      it('includes error message with LOAD_COUNT_ERROR', () => {
-        const { dispatch, reducer } = store()
-        actions.loadCount()(dispatch)
         return eventually(() => {
-          expect(reducer.mock.calls[1][1].error.message)
-            .toEqual('something terrible happened')
+          const actions = reducer.mock.calls.map(x => x[1])
+          expectRequest('LOAD_COUNT', undefined, actions[0])
+          expectError('LOAD_COUNT', 'Error: something terrible happened', actions[1])
         })
       })
     })
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 6b0ce2c..d0db9f5 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -3,12 +3,11 @@ import * as redux from 'redux'
 import { api } from '../api'
 import * as state from '../reducers/index'
 
-type Q<T> = { request: T }
-type S<T> = { response: T }
-type E = { error: Error }
-
-type QEmpty = Q<null>
-type QValue = Q<{ value: number }>
+type APIAction<Q, S> = {
+  request?: Q
+  response?: S
+  error?: string
+}
 
 export type Action =
 // UI actions
@@ -16,13 +15,8 @@ export type Action =
 |  { type: 'RESET_COUNTER' }
 
 // API Requests
-| ({ type: 'SAVE_COUNT_REQUEST' } & QValue)
-| ({ type: 'SAVE_COUNT_SUCCESS' } & QValue & S<{}>)
-| ({ type: 'SAVE_COUNT_ERROR'   } & QValue & E)
-
-| ({ type: 'LOAD_COUNT_REQUEST' } & QEmpty)
-| ({ type: 'LOAD_COUNT_SUCCESS' } & QEmpty & S<{ value: number }>)
-| ({ type: 'LOAD_COUNT_ERROR'   } & QEmpty & E)
+| ({ type: 'SAVE_COUNT' } & APIAction<{ value: number }, {}>)
+| ({ type: 'LOAD_COUNT' } & APIAction<undefined, { value: number }>)
 
 export const incrementCounter = (delta: number): Action => ({
   type: 'INCREMENT_COUNTER',
@@ -33,40 +27,16 @@ export const resetCounter = (): Action => ({
   type: 'RESET_COUNTER',
 })
 
-export type ApiActionGroup<_Q, _S> = {
-  request: (q?: _Q)         => Action & Q<_Q>
-  success: (s: _S, q?: _Q)  => Action & Q<_Q> & S<_S>
-  error: (e: Error, q?: _Q) => Action & Q<_Q> & E
-}
-
-const _saveCount: ApiActionGroup<{ value: number }, {}> = {
-  request: (request) =>
-    ({ type: 'SAVE_COUNT_REQUEST', request }),
-  success: (response, request) =>
-    ({ type: 'SAVE_COUNT_SUCCESS', request, response }),
-  error: (error, request) =>
-    ({ type: 'SAVE_COUNT_ERROR',   request, error }),
-}
-
-const _loadCount: ApiActionGroup<null, { value: number }> = {
-  request: (request) =>
-    ({ type: 'LOAD_COUNT_REQUEST', request: null }),
-  success: (response, request) =>
-    ({ type: 'LOAD_COUNT_SUCCESS', request: null, response }),
-  error: (error, request) =>
-    ({ type: 'LOAD_COUNT_ERROR',   request: null, error }),
-}
-
 type apiFunc<Q, S> = (q: Q) => Promise<S>
 
-function apiActionGroupFactory<Q, S>(x: ApiActionGroup<Q, S>, go: apiFunc<Q, S>) {
-  return (request: Q) => (dispatch: redux.Dispatch<state.All>) => {
-    dispatch(x.request(request))
+function apiActionCreator<Q, S>(a: Action & APIAction<Q, S>, go: apiFunc<Q, S>) {
+  return (request?: Q) => (dispatch: redux.Dispatch<state.All>) => {
+    dispatch({ ...a, request })
     go(request)
-      .then((response) => dispatch(x.success(response, request)))
-      .catch((e: Error) => dispatch(x.error(e, request)))
+      .then((response) => dispatch({ ...a, request, response }))
+      .catch((e: Error) => dispatch({ ...a, request, error: e.toString() }))
   }
 }
 
-export const saveCount = apiActionGroupFactory(_saveCount, api.save)
-export const loadCount = () => apiActionGroupFactory(_loadCount, api.load)(null)
+export const saveCount = apiActionCreator({ type: 'SAVE_COUNT' }, api.save)
+export const loadCount = apiActionCreator({ type: 'LOAD_COUNT' }, api.load)
diff --git a/src/api.ts b/src/api.ts
index 655d922..b47ffb2 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -19,16 +19,16 @@ const flakify = <T>(f: () => T): Promise<T> =>
   )
 
 export type Api = {
-  save(x: { value: number }): Promise<null>,
+  save(x: { value: number }): Promise<{}>,
   load(): (Promise<{ value: number }>),
 }
 
 export const api: Api = {
-  save: (counter: { value: number }): Promise<null> => flakify(() => {
+  save: counter => flakify(() => {
       localStorage.setItem('__counterValue', counter.value.toString())
-      return null
+      return {}
     }),
-  load: (): Promise<{ value: number }> => flakify(() => {
+  load: () => flakify(() => {
       const storedValue = parseInt(localStorage.getItem('__counterValue'), 10)
       return {
         value: storedValue || 0,
diff --git a/src/reducers/__tests__/index_spec.ts b/src/reducers/__tests__/index_spec.ts
index eefbf3c..70cf587 100644
--- a/src/reducers/__tests__/index_spec.ts
+++ b/src/reducers/__tests__/index_spec.ts
@@ -30,7 +30,7 @@ describe('reducers/counter', () => {
       done()
     })
     store.dispatch({
-      type: 'LOAD_COUNT_SUCCESS',
+      type: 'LOAD_COUNT',
       request: {},
       response: { value: 14 } })
   })
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index 7f6ce62..f7d2ac9 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -12,37 +12,24 @@ export type All = {
 }
 
 function isSaving (state: boolean = false, action: Action): boolean {
-  switch (action.type) {
-    case 'SAVE_COUNT_REQUEST':
-      return true
-    case 'SAVE_COUNT_SUCCESS':
-    case 'SAVE_COUNT_ERROR':
-      return false
-    default:
-      return state
+  if (action.type === 'SAVE_COUNT') {
+    return !action.response && !action.error
   }
+  return state
 }
 
 function isLoading (state: boolean = false, action: Action): boolean {
-  switch (action.type) {
-    case 'LOAD_COUNT_REQUEST':
-      return true
-    case 'LOAD_COUNT_SUCCESS':
-    case 'LOAD_COUNT_ERROR':
-      return false
-    default:
-      return state
+  if (action.type === 'LOAD_COUNT') {
+    return !action.response && !action.error
   }
+  return state
 }
 
 function error (state: string = '', action: Action): string {
   switch (action.type) {
-    case 'LOAD_COUNT_REQUEST':
-    case 'SAVE_COUNT_REQUEST':
-      return ''
-    case 'LOAD_COUNT_ERROR':
-    case 'SAVE_COUNT_ERROR':
-      return action.error.toString()
+    case 'LOAD_COUNT':
+    case 'SAVE_COUNT':
+      return action.error || ''
     default:
       return state
   }
@@ -61,8 +48,12 @@ function counter (state: Counter = initialState, action: Action): Counter {
     case 'RESET_COUNTER':
       return { value: 0 }
 
-    case 'LOAD_COUNT_SUCCESS':
-      return { value: action.response.value }
+    case 'LOAD_COUNT': {
+      const { response } = action
+      if (response) {
+        return { value: response.value }
+      }
+    }
 
     default:
       return state

From 68127d031f1888b6e48e2deb34c0da588106c45b Mon Sep 17 00:00:00 2001
From: rjz <rj@rjzaworski.com>
Date: Mon, 4 Sep 2017 17:42:37 -0700
Subject: [PATCH 3/3] Documents impact of partial actions

---
 src/actions/index.ts  | 5 ++++-
 src/reducers/index.ts | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/actions/index.ts b/src/actions/index.ts
index d0db9f5..6b2d439 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -3,6 +3,8 @@ import * as redux from 'redux'
 import { api } from '../api'
 import * as state from '../reducers/index'
 
+// API actions contain details on the initial request and an eventual error or
+// response
 type APIAction<Q, S> = {
   request?: Q
   response?: S
@@ -14,7 +16,8 @@ export type Action =
    { type: 'INCREMENT_COUNTER', delta: number }
 |  { type: 'RESET_COUNTER' }
 
-// API Requests
+// API Requests implemented as partial actions
+// See: https://goo.gl/FYWGpr
 | ({ type: 'SAVE_COUNT' } & APIAction<{ value: number }, {}>)
 | ({ type: 'LOAD_COUNT' } & APIAction<undefined, { value: number }>)
 
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index f7d2ac9..a5376dc 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -13,6 +13,9 @@ export type All = {
 
 function isSaving (state: boolean = false, action: Action): boolean {
   if (action.type === 'SAVE_COUNT') {
+    // `SAVE_COUNT` is a partial action. We'll check its payload to determine
+    // whether this instance describes its resolution.
+    // See: https://goo.gl/FYWGpr
     return !action.response && !action.error
   }
   return state
@@ -51,6 +54,8 @@ function counter (state: Counter = initialState, action: Action): Counter {
     case 'LOAD_COUNT': {
       const { response } = action
       if (response) {
+        // If `response` is set, `LOAD_COUNT` is "resolved"
+        // See: https://goo.gl/FYWGpr
         return { value: response.value }
       }
     }