Merge pull request #63 from gaearon/middleware-api

Add basic middleware api to default dispatcher

examples/actions/CounterActions.js

@@ -7,7 +7,9 @@ export function increment() {
 }
 
 export function incrementIfOdd() {
-  return (dispatch, { counter }) => {
+  return (dispatch, getState) => {
+    const { counter } = getState();
+
     if (counter % 2 === 0) {
       return;
     }

examples/components/Counter.js

@@ -8,14 +8,16 @@ export default class Counter {
   };
 
   render() {
-    const { increment, decrement, counter } = this.props;
+    const { increment, incrementIfOdd, decrement, counter } = this.props;
     return (
       <p>
         Clicked: {counter} times
         {' '}
         <button onClick={increment}>+</button>
         {' '}
         <button onClick={decrement}>-</button>
+        {' '}
+        <button onClick={incrementIfOdd}>Increment if odd</button>
       </p>
     );
   }

src/Redux.js

@@ -1,11 +1,15 @@
 import createDispatcher from './createDispatcher';
 import composeStores from './utils/composeStores';
+import thunkMiddleware from './middleware/thunk';
 
 export default class Redux {
   constructor(dispatcher, initialState) {
     if (typeof dispatcher === 'object') {
       // A shortcut notation to use the default dispatcher
-      dispatcher = createDispatcher(composeStores(dispatcher));
+      dispatcher = createDispatcher(
+        composeStores(dispatcher),
+        getState => [ thunkMiddleware(getState) ]
+      );
     }
 
     this.state = initialState;

src/createDispatcher.js

@@ -1,20 +1,24 @@
-export default function createDispatcher(store) {
+import compose from './utils/composeMiddleware';
+
+export default function createDispatcher(store, middlewares = []) {
   return function dispatcher(initialState, setState) {
     let state = store(initialState, {});
     setState(state);
 
-    function dispatchSync(action) {
+    function dispatch(action) {
       state = store(state, action);
       setState(state);
       return action;
     }
 
-    function dispatch(action) {
-      return typeof action === 'function' ?
-        action(dispatch, state) :
-        dispatchSync(action);
+    function getState() {
+      return state;
+    }
+
+    if (typeof middlewares === 'function') {
+      middlewares = middlewares(getState);
     }
 
-    return dispatch;
+    return compose(...middlewares, dispatch);
   };
 }

src/index.js

@@ -11,5 +11,6 @@ export provide from './components/provide';
 export connect from './components/connect';
 
 // Utilities
+export compose from './utils/composeMiddleware';
 export composeStores from './utils/composeStores';
 export bindActionCreators from './utils/bindActionCreators';

src/middleware/thunk.js

@@ -0,0 +1,10 @@
+export default function thunkMiddleware(getState) {
+  return (next) => {
+    const recurse = (action) =>
+      typeof action === 'function' ?
+        action(recurse, getState) :
+        next(action);
+
+    return recurse;
+  };
+}

src/utils/composeMiddleware.js

@@ -0,0 +1,3 @@
+export default function compose(...middlewares) {
+  return middlewares.reduceRight((composed, m) => m(composed));
+}