refact middlewares

Author: Péter Hauszknecht

src/store/index.ts

@@ -19,43 +19,31 @@ export default class Store<State, R = Reducer<State>> implements IStore<State, R
   getState: GetState<State> = () => this.state;
 
   dispatch: Dispatch<R> = reducer => {
-    assertReducer(reducer);
-    const finalReducer = this.applyMiddlewares(reducer);
-    if (typeof finalReducer === 'function') {
-      this.state = finalReducer(this.state);
-      this.listeners.forEach(listener => listener());
-    }
-    return <R>finalReducer;
+    if (typeof reducer !== 'function')
+      throw new Error('Reducer is not a function: dispatch takes only reducers as functions.');
+    this.state = reducer(this.state);
+    this.listeners.forEach(listener => listener());
+    return <R>reducer;
   };
 
   subscribe = (listener: Listener): Unsubscribe => {
-    assertListener(listener);
+    if (typeof listener !== 'function')
+      throw new Error('Listener is not a function: subscribe takes only listeners as functions.');
     this.listeners = [ ...this.listeners, listener ];
     return () => (this.listeners = this.listeners.filter(lis => lis !== listener));
   };
 
-  addMiddleware = <R2>(...middlewares: Middleware<State>[]): Store<State, R | R2> => {
-    assertMiddlewares(middlewares);
-    this.middlewares = [ ...this.middlewares, ...middlewares ];
+  addMiddleware = <R2>(...middlewares: Middleware<State, R, R2>[]): Store<State, R | R2> => {
+    if (middlewares.some(middleware => typeof middleware !== 'function'))
+      throw new Error('Middleware is not a function: addMiddleware takes only middlewares as functions.');
+    middlewares.forEach(middleware => {
+      const prevDispatch = this.dispatch;
+      const dispatch = reducer => middleware(this)(prevDispatch)(reducer);
+      this.dispatch = dispatch;
+    });
     return this;
   };
 
   private applyMiddlewares = (reducer: R): R =>
     <R>this.middlewares.reduce((prevReducer, middleware) => middleware(this, prevReducer), reducer);
 }
-
-function assertReducer(reducer) {
-  if (typeof reducer !== 'function')
-    throw new Error('Reducer is not a function: dispatch takes only reducers as functions.');
-}
-
-function assertListener(listener) {
-  if (typeof listener !== 'function')
-    throw new Error('Listener is not a function: subscribe takes only listeners as functions.');
-}
-
-function assertMiddlewares(middlewares) {
-  if (middlewares.some(middleware => typeof middleware !== 'function')) {
-    throw new Error('Middleware is not a function: addMiddleware takes only middlewares as functions.');
-  }
-}

src/store/middlewares/thunk.ts

@@ -1,29 +1,35 @@
 import { Middleware, GetState, Dispatch, Reducer, Store } from '../types';
 
-export interface ThunkMiddleware<State, ExtraArgument> extends Middleware<State> {
-  withExtraArgument: (extraArgument: ExtraArgument) => ThunkMiddleware<State, ExtraArgument>;
+export interface ThunkMiddleware<State, ExtraArgument>
+  extends Middleware<State, Reducer<State>, Thunk<State, ExtraArgument, any>> {
+  withExtraArgument: <EA>(extraArgument: EA) => ThunkMiddleware<State, EA>;
 }
 
-export interface Delegate<State, ExtraArgument, T> {
-  (dispatch: ThunkDispatch<State, ExtraArgument>, getState: GetState<State>, extraArgument: ExtraArgument): T;
+export interface Delegate<State, ExtraArgument, Return> {
+  (dispatch: ThunkDispatch<State, ExtraArgument>, getState: GetState<State>, extraArgument: ExtraArgument): Return;
 }
 
 export interface ThunkDispatch<State, ExtraArgument> extends Dispatch<Reducer<State>> {
-  <T>(reducer: Thunk<State, ExtraArgument, T>): T;
+  <Return>(reducer: Thunk<State, ExtraArgument, Return>): Return;
 }
 
-export interface Thunk<State, ExtraArgument, T> {
-  (state: State): Delegate<State, ExtraArgument, T>;
+export interface Thunk<State, ExtraArgument, Return> {
+  (state: State): Delegate<State, ExtraArgument, Return>;
 }
 
-function thunkFactory<T>(extraArgument?: T): ThunkMiddleware<any, T> {
-  const thunk = ((store, reducer) => {
+const thunkFactory = (extraArgument?) => {
+  const thunk = store => next => reducer => {
+    if (typeof reducer !== 'function') throw new Error('Thunk requires reducers as functions');
     const state = store.getState();
     const result = reducer(state);
-    return typeof result === 'function' ? result(store.dispatch, store.getState, extraArgument) : reducer;
-  }) as ThunkMiddleware<any, T>;
-  thunk.withExtraArgument = thunkFactory;
+    if (typeof result === 'function') return result(store.dispatch, store.getState, extraArgument);
+    else {
+      next(_ => result);
+      return reducer;
+    }
+  };
+  thunk['withExtraArgument'] = thunkFactory;
   return thunk;
-}
+};
 
-export default thunkFactory();
+export default thunkFactory() as ThunkMiddleware<any, any>;

src/store/types.ts

@@ -18,13 +18,17 @@ export interface Unsubscribe {
   (): void;
 }
 
-export interface Middleware<State> {
-  (store: Store<State>, reducer: Reducer<State>): Reducer<State>;
+export interface Middleware<State, R1, R2> {
+  (store: Store<State, R1>): {
+    (next: Dispatch<R1>): {
+      (reducer: R2): any;
+    }
+  };
 }
 
 export interface Store<State, R = Reducer<State>> {
   getState: GetState<State>;
   dispatch: Dispatch<R>;
   subscribe(listener: Listener): Unsubscribe;
-  addMiddleware<R2>(...middlewares: Middleware<State>[]): Store<State, R | R2>;
+  addMiddleware<R2>(...middlewares: Middleware<State, R, R2>[]): Store<State, R | R2>;
 }