Dispatch sends action through entire middleware chain

src/utils/applyMiddleware.js

@@ -16,16 +16,18 @@ export default function applyMiddleware(...middlewares) {
 
   return next => (...args) => {
     const store = next(...args);
-    const methods = {
-      dispatch: store.dispatch,
-      getState: store.getState
-    };
+    const middleware = composeMiddleware(...finalMiddlewares);
+
     return {
       ...store,
-      dispatch: compose(
-        composeMiddleware(...finalMiddlewares)(methods),
-        store.dispatch
-      )
+      dispatch: function dispatch(action) {
+        const methods = { dispatch, getState: store.getState };
+
+        return compose(
+          middleware(methods),
+          store.dispatch
+        )(action);
+      }
     };
   };
 }

test/applyMiddleware.spec.js

@@ -15,6 +15,7 @@ describe('applyMiddleware', () => {
 
     const spy = expect.createSpy(() => {});
     const store = applyMiddleware(test(spy), thunk)(createStore)(reducers.todos);
+
     store.dispatch(addTodo('Use Redux'));
 
     expect(Object.keys(spy.calls[0].arguments[0])).toEqual([
@@ -24,6 +25,24 @@ describe('applyMiddleware', () => {
     expect(store.getState()).toEqual([ { id: 1, text: 'Use Redux' } ]);
   });
 
+  it('should pass recursive dispatches through the middleware chain', () => {
+    function test(spyOnMethods) {
+      return () => next => action => {
+        spyOnMethods(action);
+        return next(action);
+      };
+    }
+
+    const spy = expect.createSpy(() => {});
+
+    const store = applyMiddleware(test(spy), thunk)(createStore)(reducers.todos);
+
+    return store.dispatch(addTodoAsync('Use Redux')).then(() => {
+      expect(spy.calls.length).toEqual(2);
+    });
+
+  });
+
   it('uses thunk middleware by default', done => {
     const store = applyMiddleware()(createStore)(reducers.todos);