Merge pull request #256 from gaearon/remove-thunk-middleware

Remove thunk middleware from the core

Author: gaearon

examples/counter/containers/App.js

@@ -4,7 +4,15 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import * as reducers from '../reducers';
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+// TODO: move into a separate project
+function thunk({ dispatch, getState }) {
+  return next => action =>
+    typeof action === 'function' ?
+      action(dispatch, getState) :
+      next(action);
+}
+
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const store = createStoreWithMiddleware(reducers);
 
 export default class App {

src/utils/applyMiddleware.js

@@ -1,6 +1,5 @@
 import compose from './compose';
 import composeMiddleware from './composeMiddleware';
-import thunk from '../middleware/thunk';
 
 /**
  * Creates a higher-order store that applies middleware to a store's dispatch.
@@ -10,24 +9,25 @@ import thunk from '../middleware/thunk';
  * @return {Function} A higher-order store
  */
 export default function applyMiddleware(...middlewares) {
-  const finalMiddlewares = middlewares.length ?
-    middlewares :
-    [thunk];
-
   return next => (...args) => {
     const store = next(...args);
-    const middleware = composeMiddleware(...finalMiddlewares);
+    const middleware = composeMiddleware(...middlewares);
+
+    function dispatch(action) {
+      const methods = {
+        dispatch,
+        getState: store.getState
+      };
+
+      return compose(
+        middleware(methods),
+        store.dispatch
+      )(action);
+    }
 
     return {
       ...store,
-      dispatch: function dispatch(action) {
-        const methods = { dispatch, getState: store.getState };
-
-        return compose(
-          middleware(methods),
-          store.dispatch
-        )(action);
-      }
+      dispatch
     };
   };
 }

test/applyMiddleware.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import { createStore, applyMiddleware } from '../src/index';
 import * as reducers from './helpers/reducers';
 import { addTodo, addTodoAsync, addTodoIfEmpty } from './helpers/actionCreators';
-import thunk from '../src/middleware/thunk';
+import { thunk } from './helpers/middleware';
 
 describe('applyMiddleware', () => {
   it('wraps dispatch method with middleware', () => {
@@ -34,17 +34,15 @@ describe('applyMiddleware', () => {
     }
 
     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);
+  it('works with thunk middleware', done => {
+    const store = applyMiddleware(thunk)(createStore)(reducers.todos);
 
     store.dispatch(addTodoIfEmpty('Hello'));
     expect(store.getState()).toEqual([{

src/middleware/thunk.js renamed to test/helpers/middleware.js

@@ -1,4 +1,4 @@
-export default function thunkMiddleware({ dispatch, getState }) {
+export function thunk({ dispatch, getState }) {
   return next => action =>
     typeof action === 'function' ?
       action(dispatch, getState) :