alternative callback-builder-style notation for actionsMap

Author: phryneas

src/createReducer.test.ts

@@ -1,5 +1,5 @@
 import { createReducer, CaseReducer } from './createReducer'
-import { PayloadAction } from './createAction'
+import { PayloadAction, createAction } from './createAction'
 import { Reducer } from 'redux'
 
 interface Todo {
@@ -74,6 +74,73 @@ describe('createReducer', () => {
 
     behavesLikeReducer(todosReducer)
   })
+
+  describe('alternative builder callback for actionMap', () => {
+    const increment = createAction<number, 'increment'>('increment')
+    const decrement = createAction<number, 'decrement'>('decrement')
+
+    test('can be used with ActionCreators', () => {
+      const reducer = createReducer(0, builder =>
+        builder
+          .addCase(increment, (state, action) => state + action.payload)
+          .addCase(decrement, (state, action) => state - action.payload)
+      )
+      expect(reducer(0, increment(5))).toBe(5)
+      expect(reducer(5, decrement(5))).toBe(0)
+    })
+    test('can be used with string types', () => {
+      const reducer = createReducer(0, builder =>
+        builder
+          .addCase(
+            'increment',
+            (state, action: { type: 'increment'; payload: number }) =>
+              state + action.payload
+          )
+          .addCase(
+            'decrement',
+            (state, action: { type: 'decrement'; payload: number }) =>
+              state - action.payload
+          )
+      )
+      expect(reducer(0, increment(5))).toBe(5)
+      expect(reducer(5, decrement(5))).toBe(0)
+    })
+    test('can be used with ActionCreators and string types combined', () => {
+      const reducer = createReducer(0, builder =>
+        builder
+          .addCase(increment, (state, action) => state + action.payload)
+          .addCase(
+            'decrement',
+            (state, action: { type: 'decrement'; payload: number }) =>
+              state - action.payload
+          )
+      )
+      expect(reducer(0, increment(5))).toBe(5)
+      expect(reducer(5, decrement(5))).toBe(0)
+    })
+    test('will throw if the same type is used twice', () => {
+      expect(() =>
+        createReducer(0, builder =>
+          builder
+            .addCase(increment, (state, action) => state + action.payload)
+            .addCase(increment, (state, action) => state + action.payload)
+            .addCase(decrement, (state, action) => state - action.payload)
+        )
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"addCase cannot be called with two reducers for the same action type"`
+      )
+      expect(() =>
+        createReducer(0, builder =>
+          builder
+            .addCase(increment, (state, action) => state + action.payload)
+            .addCase('increment', state => state + 1)
+            .addCase(decrement, (state, action) => state - action.payload)
+        )
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"addCase cannot be called with two reducers for the same action type"`
+      )
+    })
+  })
 })
 
 function behavesLikeReducer(todosReducer: TodosReducer) {

src/createReducer.ts

@@ -1,5 +1,9 @@
 import createNextState, { Draft } from 'immer'
 import { AnyAction, Action, Reducer } from 'redux'
+import {
+  executeReducerBuilderCallback,
+  ActionReducerMapBuilder
+} from './mapBuilders'
 
 /**
  * Defines a mapping from action types to corresponding action object shapes.
@@ -51,7 +55,24 @@ export type CaseReducers<S, AS extends Actions> = {
 export function createReducer<
   S,
   CR extends CaseReducers<S, any> = CaseReducers<S, any>
->(initialState: S, actionsMap: CR): Reducer<S> {
+>(initialState: S, actionsMap: CR): Reducer<S>
+
+export function createReducer<S>(
+  initialState: S,
+  builderCallback: (builder: ActionReducerMapBuilder<S>) => void
+): Reducer<S>
+
+export function createReducer<S>(
+  initialState: S,
+  mapOrBuilderCallback:
+    | CaseReducers<S, any>
+    | ((builder: ActionReducerMapBuilder<S>) => void)
+): Reducer<S> {
+  let actionsMap =
+    typeof mapOrBuilderCallback === 'function'
+      ? executeReducerBuilderCallback(mapOrBuilderCallback)
+      : mapOrBuilderCallback
+
   return function(state = initialState, action): S {
     // @ts-ignore createNextState() produces an Immutable<Draft<S>> rather
     // than an Immutable<S>, and TypeScript cannot find out how to reconcile

src/index.ts

@@ -8,3 +8,4 @@ export * from './createReducer'
 export * from './createSlice'
 export * from './serializableStateInvariantMiddleware'
 export * from './getDefaultMiddleware'
+export { ActionReducerMapBuilder } from './mapBuilders'

src/mapBuilders.ts

@@ -0,0 +1,44 @@
+import { Action } from 'redux'
+import { CaseReducer, CaseReducers } from './createReducer'
+
+export interface TypedActionCreator<Type extends string> {
+  (...args: any[]): Action<Type>
+  type: Type
+}
+
+export interface ActionReducerMapBuilder<State> {
+  addCase<ActionCreator extends TypedActionCreator<string>>(
+    actionCreator: ActionCreator,
+    reducer: CaseReducer<State, ReturnType<ActionCreator>>
+  ): ActionReducerMapBuilder<State>
+  addCase<Type extends string, A extends Action<Type>>(
+    type: Type,
+    reducer: CaseReducer<State, A>
+  ): ActionReducerMapBuilder<State>
+}
+
+export function executeReducerBuilderCallback<S>(
+  builderCallback: (builder: ActionReducerMapBuilder<S>) => void
+): CaseReducers<S, any> {
+  const actionsMap: CaseReducers<S, any> = {}
+  const builder = {
+    addCase(
+      typeOrActionCreator: string | TypedActionCreator<any>,
+      reducer: CaseReducer<S>
+    ) {
+      const type =
+        typeof typeOrActionCreator === 'string'
+          ? typeOrActionCreator
+          : typeOrActionCreator.type
+      if (type in actionsMap) {
+        throw new Error(
+          'addCase cannot be called with two reducers for the same action type'
+        )
+      }
+      actionsMap[type] = reducer
+      return builder
+    }
+  }
+  builderCallback(builder)
+  return actionsMap
+}

type-tests/files/createReducer.typetest.ts

@@ -1,5 +1,5 @@
 import { Reducer } from 'redux'
-import { createReducer } from '../../src'
+import { createReducer, createAction } from '../../src'
 
 function expectType<T>(p: T) {}
 
@@ -63,3 +63,55 @@ function expectType<T>(p: T) {}
     }
   })
 }
+
+/** Test:  alternative builder callback for actionMap */
+{
+  const increment = createAction<number, 'increment'>('increment')
+  const decrement = createAction<number, 'decrement'>('decrement')
+
+  const reducer = createReducer(0, builder => {
+    builder.addCase(increment, (state, action) => {
+      expectType<number>(state)
+      expectType<{ type: 'increment'; payload: number }>(action)
+      // typings:expect-error
+      expectType<string>(state)
+      // typings:expect-error
+      expectType<{ type: 'increment'; payload: string }>(action)
+      // typings:expect-error
+      expectType<{ type: 'decrement'; payload: number }>(action)
+    })
+
+    builder.addCase('increment', (state, action) => {
+      expectType<number>(state)
+      expectType<{ type: 'increment' }>(action)
+      // typings:expect-error
+      expectType<{ type: 'decrement' }>(action)
+      // typings:expect-error - this cannot be inferred and has to be manually specified
+      expectType<{ type: 'increment'; payload: number }>(action)
+    })
+
+    builder.addCase(
+      increment,
+      (state, action: ReturnType<typeof increment>) => state
+    )
+    // typings:expect-error
+    builder.addCase(
+      increment,
+      (state, action: ReturnType<typeof decrement>) => state
+    )
+
+    builder.addCase(
+      'increment',
+      (state, action: ReturnType<typeof increment>) => state
+    )
+    // typings:expect-error
+    builder.addCase(
+      'decrement',
+      (state, action: ReturnType<typeof increment>) => state
+    )
+  })
+
+  expectType<number>(reducer(0, increment(5)))
+  // typings:expect-error
+  expectType<string>(reducer(0, increment(5)))
+}