Adds the ability to listen to multiple targets

Author: ctrlplusb

index.d.ts

@@ -279,12 +279,16 @@ export type Thunk<
   result: Result;
 };
 
-type ListenToTarget<TargetPayload> =
+type Target<TargetPayload> =
   | Action<any, TargetPayload>
   | Thunk<any, TargetPayload>
   | string
   | void;
 
+type ListenToTarget<TargetPayload> =
+  | Target<TargetPayload>
+  | Array<Target<TargetPayload>>;
+
 /**
  * Declares an thunk action type against your model.
  *
@@ -459,7 +463,7 @@ type Arguments =
   | [any, any, any, any]
   | [any, any, any, any, any];
 
-type OptionalArguments = void | Arguments;
+type OptionalArguments = [] | Arguments;
 
 /**
  * A selector type.
@@ -478,11 +482,11 @@ type OptionalArguments = void | Arguments;
 export type Selector<
   Model extends Object = {},
   Result = any,
-  Args extends Arguments = any,
-  RunTimeArgs extends OptionalArguments = any,
+  ResolvedState extends Arguments = any,
+  RuntimeArgs extends OptionalArguments = any,
   StoreModel extends Object = {}
 > = {
-  (resolvedArgs: Args, runTimeArgs: RunTimeArgs): Result;
+  (resolvedArgs: ResolvedState, runTimeArgs: RuntimeArgs): Result;
   type: 'selector';
   result: Result;
 };

src/__tests__/listener-actions.test.js

@@ -165,3 +165,60 @@ it('listening to an string, firing a thunk', done => {
   // act
   store.dispatch({ type: 'MATH_ADD', payload: 10 });
 });
+
+it('action listening to multiple actions', async () => {
+  // arrange
+  const actionTarget = action(() => {});
+  const thunkTarget = thunk(() => {});
+  const model = {
+    logs: [],
+    actionTarget,
+    thunkTarget,
+    onActions: action(
+      (state, payload) => {
+        state.logs.push(payload);
+      },
+      { listenTo: [actionTarget, thunkTarget] },
+    ),
+  };
+  const store = createStore(model);
+
+  // act
+  store.getActions().actionTarget('action payload');
+  await store.getActions().thunkTarget('thunk payload');
+
+  // assert
+  expect(store.getState().logs).toEqual(['action payload', 'thunk payload']);
+});
+
+it('thunk listening to multiple actions', async () => {
+  // arrange
+  const thunkSpy = jest.fn();
+  const actionTarget = action(() => {});
+  const thunkTarget = thunk(() => {});
+  const model = {
+    logs: [],
+    actionTarget,
+    thunkTarget,
+    onActions: thunk(thunkSpy, { listenTo: [actionTarget, thunkTarget] }),
+  };
+  const store = createStore(model);
+
+  // act
+  store.getActions().actionTarget('action payload');
+  await store.getActions().thunkTarget('thunk payload');
+
+  // assert
+  await new Promise(resolve => setTimeout(resolve, 100));
+  expect(thunkSpy).toHaveBeenCalledTimes(2);
+  expect(thunkSpy).toHaveBeenCalledWith(
+    expect.anything(),
+    'action payload',
+    expect.anything(),
+  );
+  expect(thunkSpy).toHaveBeenCalledWith(
+    expect.anything(),
+    'thunk payload',
+    expect.anything(),
+  );
+});

src/__tests__/typescript/action.ts

@@ -116,3 +116,22 @@ const listeningInvalidFunc: Action<ListeningModel, string> = action(
     listenTo: () => undefined,
   },
 );
+
+const multiListeningAction: Action<ListeningModel, string> = action(
+  (state, payload) => {
+    state.logs.push(payload);
+  },
+  {
+    listenTo: [targetModel.doAction, targetModel.doThunk],
+  },
+);
+
+const multiListeningActionInvalid: Action<ListeningModel, string> = action(
+  (state, payload) => {
+    state.logs.push(payload);
+  },
+  // typings:expect-error
+  {
+    listenTo: [targetModel.doAction, targetModel.doThunkInvalid],
+  },
+);

src/__tests__/typescript/selector.ts

@@ -7,7 +7,7 @@ interface Todo {
   text: string;
 }
 
-type CountSelector = Selector<TodosModel, number, [Array<Todo>], void>;
+type CountSelector = Selector<TodosModel, number, [Array<Todo>]>;
 
 interface TodosModel {
   items: Array<Todo>;
@@ -21,7 +21,7 @@ interface StatusModel {
     StatusModel,
     number,
     [SelectorRef<CountSelector>],
-    void,
+    [],
     StoreModel
   >;
 }

src/__tests__/typescript/thunk.ts

@@ -139,3 +139,22 @@ const listenInvalidFunc: Thunk<AuditModel, string> = thunk(
     listenTo: () => undefined,
   },
 );
+
+const multiListenAction: Thunk<ListeningModel, string> = thunk(
+  (actions, payload) => {
+    actions.log(payload);
+  },
+  {
+    listenTo: [targetModel.doAction, targetModel.doThunk],
+  },
+);
+
+const multiListenActionInvalidThunk: Thunk<ListeningModel, string> = thunk(
+  (actions, payload) => {
+    actions.log(payload);
+  },
+  // typings:expect-error
+  {
+    listenTo: [targetModel.doAction, targetModel.doThunkInvalid],
+  },
+);

src/create-store-internals.js

@@ -279,22 +279,31 @@ export default function createStoreInternals({
       config: { listenTo },
     } = listenerAction[actionStateSymbol] || listenerAction[thunkStateSymbol];
     let targetName;
-    if (
-      typeof listenTo === 'function' &&
-      listenTo[actionNameSymbol] &&
-      actionCreatorDict[listenTo[actionNameSymbol]]
-    ) {
-      if (listenTo[thunkSymbol]) {
-        targetName = helpers.thunkCompleteName(listenTo);
-      } else {
-        targetName = listenTo[actionNameSymbol];
+
+    const processListenTo = target => {
+      if (
+        typeof target === 'function' &&
+        target[actionNameSymbol] &&
+        actionCreatorDict[target[actionNameSymbol]]
+      ) {
+        if (target[thunkSymbol]) {
+          targetName = helpers.thunkCompleteName(target);
+        } else {
+          targetName = target[actionNameSymbol];
+        }
+      } else if (typeof target === 'string') {
+        targetName = target;
       }
-    } else if (typeof listenTo === 'string') {
-      targetName = listenTo;
+      const listenerReg = listenerActionMap[targetName] || [];
+      listenerReg.push(actionCreatorDict[listenerAction[actionNameSymbol]]);
+      listenerActionMap[targetName] = listenerReg;
+    };
+
+    if (Array.isArray(listenTo)) {
+      listenTo.forEach(processListenTo);
+    } else {
+      processListenTo(listenTo);
     }
-    const listenerReg = listenerActionMap[targetName] || [];
-    listenerReg.push(actionCreatorDict[listenerAction[actionNameSymbol]]);
-    listenerActionMap[targetName] = listenerReg;
   });
 
   selectorReducers.forEach(selector => {

website/docs/docs/api/action.md

@@ -27,11 +27,11 @@ action((state, payload) => {
     Additional configuration for the [action](/docs/api/action). It current supports the following
     properties:
 
-    - `listenTo` ([action](/docs/api/action) reference | [thunk](/docs/api/thunk) reference | string, *optional*)
+    - `listenTo` ([action](/docs/api/action) reference | [thunk](/docs/api/thunk) reference | string | Array, *optional*)
 
-      Setting this makes your [action](/docs/api/action) *listen* to provided *target* [action](/docs/api/action), [thunk](/docs/api/thunk), or string named action. Any time the *target* is successfully processed then this [action](/docs/api/action) will be fired.
+      Setting this makes your [action](/docs/api/action) *listen* to provided *target(s)* [action(s)](/docs/api/action), [thunk(s)](/docs/api/thunk), or string named action(s). Any time the *target(s)* is successfully processed then this [action](/docs/api/action) will be fired.
 
-      The *listener* will receive the same payload as was supplied to the *target*.
+      The *listener* will receive the same payload as was supplied to the *target(s)*.
 
       ```javascript
       const auditModel = {
@@ -100,6 +100,40 @@ In the example above note that the `onAddTodo` [action](/docs/api/action) has be
 
 Any time the `addTodo` [action](/docs/api/action) completes successfully, the `onAddTodo` will be fired, receiving the same payload as what `addTodo` received.
 
+## Listening to multiple actions
+
+It is possible for a *listening* action to listen to multiple *targets*. Simply provide an array of *targets* against the `listenTo` configuration.
+
+```javascript
+const fooModel = {
+  items: [],
+  //  👇 the first target action
+  firstAction: action((state, payload) => {
+    state.items.push(payload);
+  }),
+  // 👇 the second target action
+  secondAction action((state, payload) => {
+    state.items.push(payload);
+  }),
+};
+
+const auditModel = {
+  logs: [],
+  onAddTodo: action(
+    (state, payload) => {
+      state.logs.push(payload);
+    },
+    { 
+      // 👇 declare the targets within an array
+      listenTo: [
+        fooModel.firstAction, 
+        fooModel.secondAction
+      ] 
+    } 
+  )
+};
+```
+
 ## Using console.log within actions
 
 Despite the Redux Dev Tools extension being available there may be cases in which you would like to perform a `console.log` within the body of your [actions](/docs/api/action) to aid debugging.