Uses type-narrowing in reducers

Type-safety in reducer switch statements can be improved by explicitly
declaring the action set and allowing TypeScript to narrow down the
contents of each action based on the `type` constant.

See (e.g.) reduxjs/redux#290

Author: rjz

src/actions/index.ts

@@ -1,24 +1,17 @@
-export interface Action<T, P> {
-  type: T
-  payload?: P
+export type Action = {
+  type: 'INCREMENT_COUNTER',
+  delta: number,
+} | {
+  type: 'DECREMENT_COUNTER',
+  delta: number,
 }
 
-type CounterActionTypes = 'INCREMENT_COUNTER' | 'DECREMENT_COUNTER'
-
-type IncrementCounterPayload = { delta: number }
-
-export type IncrementCounter = Action<CounterActionTypes, IncrementCounterPayload>
-
-export const incrementCounter = (delta: number): IncrementCounter => ({
+export const incrementCounter = (delta: number): Action => ({
   type: 'INCREMENT_COUNTER',
-  payload: { delta },
+  delta,
 })
 
-type DecrementCounterPayload = { delta: number }
-
-export type DecrementCounter = Action<CounterActionTypes, DecrementCounterPayload>
-
-export const decrementCounter = (delta: number): DecrementCounter => ({
-  type: 'INCREMENT_COUNTER',
-  payload: { delta },
+export const decrementCounter = (delta: number): Action => ({
+  type: 'DECREMENT_COUNTER',
+  delta,
 })

src/components/counter.tsx

@@ -5,15 +5,15 @@ import { connect } from 'react-redux'
 import { incrementCounter } from '../actions'
 import { Store } from '../reducers'
 
-interface OwnProps {
+type OwnProps = {
   label: string
 }
 
-interface ConnectedState {
+type ConnectedState = {
   counter: { value: number }
 }
 
-interface ConnectedDispatch {
+type ConnectedDispatch = {
   increment: (n: number) => void
 }
 
@@ -22,14 +22,15 @@ const mapStateToProps = (state: Store.All, ownProps: OwnProps): ConnectedState =
 })
 
 const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): ConnectedDispatch => ({
-  increment: (n: number) => {
+  increment: (n: number): void => {
     dispatch(incrementCounter(n))
   },
 })
 
 class CounterComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
 
-  _onClickIncrement = () => {
+  _onClickIncrement = (e: Event) => {
+    e.preventDefault()
     this.props.increment(1)
   }
 

src/reducers/index.ts

@@ -1,9 +1,6 @@
 import { combineReducers } from 'redux'
 
-import {
-  IncrementCounter,
-  DecrementCounter,
-} from '../actions'
+import { Action } from '../actions'
 
 export namespace Store {
 
@@ -18,12 +15,11 @@ const initialState: Store.Counter = {
   value: 0,
 }
 
-function counter (state: Store.Counter = initialState, action: IncrementCounter | DecrementCounter): Store.Counter {
+function counter (state: Store.Counter = initialState, action: Action): Store.Counter {
   const { value } = state
   switch (action.type) {
-    case 'INCREMENT_COUNTER': // not checked, pending Microsoft/TypeScript#9407
-      const { payload } = action as IncrementCounter
-      const newValue = value + payload.delta
+    case 'INCREMENT_COUNTER':
+      const newValue = value + action.delta
       return { value: newValue }
   }