combineActions: handle multiple actions with the same reducer (#113)

close #31

Author: yangmillstheory

README.md

@@ -180,6 +180,29 @@ const reducer = handleActions({
 }, { counter: 0 });
 ```
 
+### `combineActions(...actionTypes)`
+
+Combine any number of action types or action creators. `actionTypes` is a list of positional arguments which can be action type strings, symbols, or action creators.
+
+This allows you to reduce multiple distinct actions with the same reducer.
+
+```js
+const { increment, decrement } = createActions({
+  INCREMENT: amount => ({ amount }),
+  DECREMENT: amount => ({ amount: -amount }),
+})
+
+const reducer = handleAction(combineActions(increment, decrement), {
+  next: (state, { payload: { amount } }) => ({ ...state, counter: state.counter + amount }),
+  throw: state => ({ ...state, counter: 0 }),
+}, { counter: 10 })
+
+expect(reducer(undefined, increment(1)).to.deep.equal({ counter: 11 })
+expect(reducer(undefined, decrement(1)).to.deep.equal({ counter: 9 })
+expect(reducer(undefined, increment(new Error)).to.deep.equal({ counter: 0 })
+expect(reducer(undefined, decrement(new Error)).to.deep.equal({ counter: 0 })
+```
+
 ## Usage with middleware
 
 redux-actions is handy all by itself, however, its real power comes when you combine it with middleware.

src/__tests__/combineActions-test.js

@@ -0,0 +1,31 @@
+import { combineActions, createActions } from '../';
+import { expect } from 'chai';
+
+describe('combineActions', () => {
+  it('should throw an error if any action is not a function or string', () => {
+    expect(() => combineActions(1, 'ACTION_2'))
+      .to.throw(TypeError, 'Expected action types to be strings, symbols, or action creators');
+
+    expect(() => combineActions('ACTION_1', () => {}, null))
+      .to.throw(TypeError, 'Expected action types to be strings, symbols, or action creators');
+  });
+
+  it('should accept action creators and action type strings', () => {
+    const { action1, action2 } = createActions('ACTION_1', 'ACTION_2');
+
+    expect(() => combineActions('ACTION_1', 'ACTION_2'))
+      .not.to.throw(Error);
+    expect(() => combineActions(action1, action2))
+      .not.to.throw(Error);
+    expect(() => combineActions(action1, action2, 'ACTION_3'))
+      .not.to.throw(Error);
+  });
+
+  it('should return a stringifiable object', () => {
+    const { action1, action2 } = createActions('ACTION_1', 'ACTION_2');
+
+    expect(combineActions('ACTION_1', 'ACTION_2')).to.respondTo('toString');
+    expect(combineActions(action1, action2)).to.respondTo('toString');
+    expect(combineActions(action1, action2, 'ACTION_3')).to.respondTo('toString');
+  });
+});

src/__tests__/handleAction-test.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { handleAction, createAction, createActions } from '../';
+import { handleAction, createAction, createActions, combineActions } from '../';
 
 describe('handleAction()', () => {
   const type = 'TYPE';
@@ -108,4 +108,91 @@ describe('handleAction()', () => {
       });
     });
   });
+
+  describe('with combined actions', () => {
+    it('should handle combined actions in reducer form', () => {
+      const action1 = createAction('ACTION_1');
+      const reducer = handleAction(
+        combineActions(action1, 'ACTION_2', 'ACTION_3'),
+        (state, { payload }) => ({ ...state, number: state.number + payload })
+      );
+
+      expect(reducer({ number: 1 }, action1(1))).to.deep.equal({ number: 2 });
+      expect(reducer({ number: 1 }, { type: 'ACTION_2', payload: 2 })).to.deep.equal({ number: 3 });
+      expect(reducer({ number: 1 }, { type: 'ACTION_3', payload: 3 })).to.deep.equal({ number: 4 });
+    });
+
+    it('should handle combined actions in next/throw form', () => {
+      const action1 = createAction('ACTION_1');
+      const reducer = handleAction(combineActions(action1, 'ACTION_2', 'ACTION_3'), {
+        next(state, { payload }) {
+          return { ...state, number: state.number + payload };
+        }
+      });
+
+      expect(reducer({ number: 1 }, action1(1))).to.deep.equal({ number: 2 });
+      expect(reducer({ number: 1 }, { type: 'ACTION_2', payload: 2 })).to.deep.equal({ number: 3 });
+      expect(reducer({ number: 1 }, { type: 'ACTION_3', payload: 3 })).to.deep.equal({ number: 4 });
+    });
+
+    it('should handle combined error actions', () => {
+      const action1 = createAction('ACTION_1');
+      const reducer = handleAction(combineActions(action1, 'ACTION_2', 'ACTION_3'), {
+        next(state, { payload }) {
+          return { ...state, number: state.number + payload };
+        },
+
+        throw(state) {
+          return { ...state, threw: true };
+        }
+      });
+      const error = new Error;
+
+      expect(reducer({ number: 0 }, action1(error)))
+        .to.deep.equal({ number: 0, threw: true });
+      expect(reducer({ number: 0 }, { type: 'ACTION_2', payload: error, error: true }))
+        .to.deep.equal({ number: 0, threw: true });
+      expect(reducer({ number: 0 }, { type: 'ACTION_3', payload: error, error: true }))
+        .to.deep.equal({ number: 0, threw: true });
+    });
+
+    it('should return previous state if action is not one of the combined actions', () => {
+      const reducer = handleAction(
+        combineActions('ACTION_1', 'ACTION_2'),
+        (state, { payload }) => ({ ...state, state: state.number + payload }),
+      );
+
+      const state = { number: 0 };
+
+      expect(reducer(state, { type: 'ACTION_3', payload: 1 })).to.equal(state);
+    });
+
+    it('should use the default state if the initial state is undefined', () => {
+      const reducer = handleAction(
+        combineActions('INCREMENT', 'DECREMENT'),
+        (state, { payload }) => ({ ...state, counter: state.counter + payload }),
+        { counter: 10 }
+      );
+
+      expect(reducer(undefined, { type: 'INCREMENT', payload: +1 })).to.deep.equal({ counter: 11 });
+      expect(reducer(undefined, { type: 'DECREMENT', payload: -1 })).to.deep.equal({ counter: 9 });
+    });
+
+    it('should handle combined actions with symbols', () => {
+      const action1 = createAction('ACTION_1');
+      const action2 = Symbol('ACTION_2');
+      const action3 = createAction(Symbol('ACTION_3'));
+      const reducer = handleAction(
+        combineActions(action1, action2, action3),
+        (state, { payload }) => ({ ...state, number: state.number + payload })
+      );
+
+      expect(reducer({ number: 0 }, action1(1)))
+        .to.deep.equal({ number: 1 });
+      expect(reducer({ number: 0 }, { type: action2, payload: 2 }))
+        .to.deep.equal({ number: 2 });
+      expect(reducer({ number: 0 }, { type: Symbol('ACTION_3'), payload: 3 }))
+        .to.deep.equal({ number: 3 });
+    });
+  });
 });

src/__tests__/handleActions-test.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { handleActions, createAction, createActions } from '../';
+import { handleActions, createAction, createActions, combineActions } from '../';
 
 describe('handleActions', () => {
   it('create a single handler from a map of multiple action handlers', () => {
@@ -69,6 +69,62 @@ describe('handleActions', () => {
       });
   });
 
+  it('should accept combined actions as action types in single reducer form', () => {
+    const { increment, decrement } = createActions({
+      INCREMENT: amount => ({ amount }),
+      DECREMENT: amount => ({ amount: -amount })
+    });
+
+    const initialState = { counter: 10 };
+
+    const reducer = handleActions({
+      [combineActions(increment, decrement)](state, { payload: { amount } }) {
+        return { ...state, counter: state.counter + amount };
+      }
+    }, initialState);
+
+    expect(reducer(initialState, increment(5))).to.deep.equal({ counter: 15 });
+    expect(reducer(initialState, decrement(5))).to.deep.equal({ counter: 5 });
+    expect(reducer(initialState, { type: 'NOT_TYPE', payload: 1000 })).to.equal(initialState);
+    expect(reducer(undefined, increment(5))).to.deep.equal({ counter: 15 });
+  });
+
+  it('should accept combined actions as action types in the next/throw form', () => {
+    const { increment, decrement } = createActions({
+      INCREMENT: amount => ({ amount }),
+      DECREMENT: amount => ({ amount: -amount })
+    });
+
+    const initialState = { counter: 10 };
+
+    const reducer = handleActions({
+      [combineActions(increment, decrement)]: {
+        next(state, { payload: { amount } }) {
+          return { ...state, counter: state.counter + amount };
+        },
+
+        throw(state) {
+          return { ...state, counter: 0 };
+        }
+      }
+    }, initialState);
+    const error = new Error;
+
+    // non-errors
+    expect(reducer(initialState, increment(5))).to.deep.equal({ counter: 15 });
+    expect(reducer(initialState, decrement(5))).to.deep.equal({ counter: 5 });
+    expect(reducer(initialState, { type: 'NOT_TYPE', payload: 1000 })).to.equal(initialState);
+    expect(reducer(undefined, increment(5))).to.deep.equal({ counter: 15 });
+
+    // errors
+    expect(
+      reducer(initialState, { type: 'INCREMENT', payload: error, error: true })
+    ).to.deep.equal({ counter: 0 });
+    expect(
+      reducer(initialState, decrement(error))
+    ).to.deep.equal({ counter: 0 });
+  });
+
   it('should work with createActions action creators', () => {
     const { increment, decrement } = createActions('INCREMENT', 'DECREMENT');
 

src/combineActions.js

@@ -0,0 +1,28 @@
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+import isEmpty from 'lodash/isEmpty';
+import toString from 'lodash/toString';
+import isSymbol from 'lodash/isSymbol';
+
+export const ACTION_TYPE_DELIMITER = '||';
+
+function isValidActionType(actionType) {
+  return isString(actionType) || isFunction(actionType) || isSymbol(actionType);
+}
+
+function isValidActionTypes(actionTypes) {
+  if (isEmpty(actionTypes)) {
+    return false;
+  }
+  return actionTypes.every(isValidActionType);
+}
+
+export default function combineActions(...actionsTypes) {
+  if (!isValidActionTypes(actionsTypes)) {
+    throw new TypeError('Expected action types to be strings, symbols, or action creators');
+  }
+
+  const combinedActionType = actionsTypes.map(toString).join(ACTION_TYPE_DELIMITER);
+
+  return { toString: () => combinedActionType };
+}

src/createAction.js

@@ -29,7 +29,7 @@ export default function createAction(type, payloadCreator, metaCreator) {
     return action;
   };
 
-  actionHandler.toString = () => type;
+  actionHandler.toString = () => type.toString();
 
   return actionHandler;
 }

src/handleAction.js

@@ -1,19 +1,18 @@
 import isFunction from 'lodash/isFunction';
 import identity from 'lodash/identity';
 import isNil from 'lodash/isNil';
-import isSymbol from 'lodash/isSymbol';
+import includes from 'lodash/includes';
+import { ACTION_TYPE_DELIMITER } from './combineActions';
 
-export default function handleAction(type, reducers, defaultState) {
-  const typeValue = isSymbol(type)
-    ? type
-    : type.toString();
+export default function handleAction(actionType, reducers, defaultState) {
+  const actionTypes = actionType.toString().split(ACTION_TYPE_DELIMITER);
 
   const [nextReducer, throwReducer] = isFunction(reducers)
     ? [reducers, reducers]
     : [reducers.next, reducers.throw].map(reducer => (isNil(reducer) ? identity : reducer));
 
   return (state = defaultState, action) => {
-    if (action.type !== typeValue) {
+    if (!includes(actionTypes, action.type.toString())) {
       return state;
     }
 

src/index.js

@@ -1,11 +1,13 @@
 import createAction from './createAction';
 import handleAction from './handleAction';
 import handleActions from './handleActions';
+import combineActions from './combineActions';
 import createActions from './createActions';
 
 export {
   createAction,
   createActions,
   handleAction,
-  handleActions
+  handleActions,
+  combineActions
 };