Merge pull request #5 from jaystack/refact-middlewares

Refact middlewares

Author: hasyee

README.md

@@ -84,10 +84,16 @@ const setX = x => reduceFoo(state => ({ ...state, x }));
 
 ## Middlewares
 
-A repatch middleware takes the store instance and the previous reducer and returns a new reducer:
+A repatch middleware takes the `store` instance, a `next` function and the previous `reducer`. The middleware can provide a new reducer via the `next` function.
 
 ```javascript
-(Store, Reducer): Reducer
+Middleware: Store -> (Reducer -> Reducer) -> Reducer -> any
+```
+
+where
+
+```javascript
+Next: Reducer -> Reducer
 ```
 
 Use the `addMiddleware` method to chaining middlewares:
@@ -98,6 +104,21 @@ const store = new Store(initialState)
   .addMiddleware(mw2, mw3);
 ```
 
+## Middleware example
+
+This simple logger middleware logs the current- and the next state:
+
+```javascript
+const logger = store => next => reducer => {
+  const state = store.getState()
+  const nextState = reducer(state)
+  console.log(state, nextState)
+  return next(_ => nextState)
+}
+
+const store = new Store(initialState).addMiddleware(logger)
+```
+
 ## Async actions
 
 The `thunk` middleware is useful for handling async actions similar to [redux-thunk](https://www.npmjs.com/package/redux-thunk).

docs/store.md

@@ -46,11 +46,11 @@ Dispatches a reducer.
 
 #### Arguments
 
-1) **reducer** (*ReducerFunction: State -> State*): That reducer will reduce the state of the store. This takes the current state and returns the next state. The reducer will be run synchronously after applying the middlewares - if they are given.
+1) **reducer** (*ReducerFunction: State -> State*): That reducer will reduce the state of the store. This takes the current state and returns the next state.
 
 #### Returns
 
-(*ReducerFunction*): The final reducer that is made by applying the middlewares - if they are given. If the store does not have middlewares, the `dispatch` method returns the same reducer that was taken as argument.
+(*ReducerFunction*): The final reducer that is made by applying the middlewares - if they are given. If the store does enhanced with middlewares, the `dispatch` method returns the same reducer that was taken as argument.
 
 #### Example
 
@@ -66,8 +66,7 @@ console.log(result === increment) // true
 
 #### Notes
 
-1) Middlewares can modify the given reducer, so that is not guaranteed that the `dispatch` returns the original reducer that was taken as argument.
-2) The `dispatch` only runs the reducer, when the final reducer (after applying middlewares) is still a function. If the final reducer is a function, then the dispatch modifies the state by its returned value. This behaviour is strongly used by the [thunk](thunk.md) middleware, that returns the returned value of the delegate.
+Middlewares can modify the given reducer, so that is not guaranteed that the `dispatch` returns the original reducer that was taken as argument.
 
 ### `subscribe(listener)`
 
@@ -99,33 +98,32 @@ store.dispatch(increment) // listener won't be fired
 
 ### `addMiddleware(...middlewares)`
 
-Adds middleware(s) to the store.
+Enhances the store with the given middleware(s).
 
-Middlewares will be run at dispatching before the store applies the new state of the reducer. The added middlewares are composed by order of addition.
+Middlewares will be run at dispatching before the store applies the new state of the reducer. The added middlewares are composed by order of addition, so the last added middleware will run first.
 
 #### Arguments
 
-1) **...middlewares** (*MiddlewareFunction: (Store, Reducer) -> Reducer*): Middlewares as variadic arguments. Middleware functions take the `Store` instance and the dispatched reducer and return a new reducer.
+1) **...middlewares** (*MiddlewareFunction: Store -> Next -> Reducer -> any*): Middlewares as variadic arguments. Middleware functions take the `store` instance, a `next` function and the previous `reducer`. The middleware can provide a new reducer via the `next` function.
 
 #### Returns
 
-(*Store: this*): Returns the same `Store` instance for chaining.
+(*Store: this*): Returns the enhanced `Store` instance for chaining.
 
 #### Example
 
 ```javascript
-const store = new Store({ counter: 0 })
-
-const logger = (store, reducer) => {
-  const nextState = reducer(store.getState())
-  console.log(nextState)
-  return _ => nextState
+const logger = store => next => reducer => {
+  const state = store.getState()
+  const nextState = reducer(state)
+  console.log(state, nextState)
+  return next(_ => nextState)
 }
 
-store.addMiddleware(logger)
+const store = new Store({ counter: 0 }).addMiddleware(logger)
 
 store.dispatch(state => ({ counter: state.counter + 1 }))
-// logger logs { counter: 1 }
+// logger logs { counter: 0 } { counter: 1 }
 ```
 
 ## Static members

src/store/index.ts

@@ -10,7 +10,6 @@ export default class Store<State, R = Reducer<State>> implements IStore<State, R
 
   private state: State;
   private listeners: Function[] = [];
-  private middlewares: Function[] = [];
 
   constructor(initialState: State) {
     this.state = initialState;
@@ -19,43 +18,28 @@ 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>;
 }