Improve typings for Middleware

Author: David Hahn

index.d.ts

@@ -278,7 +278,11 @@ export interface MiddlewareAPI<S> {
  * logging actions, performing side effects like routing, or turning an
  * asynchronous API call into a series of synchronous actions.
  */
-export interface Middleware {
+export interface Middleware<S> {
+  (api: MiddlewareAPI<S>): (next: Dispatch<S>) => Dispatch<S>;
+}
+
+export interface GenericMiddleware {
   <S>(api: MiddlewareAPI<S>): (next: Dispatch<S>) => Dispatch<S>;
 }
 
@@ -299,7 +303,7 @@ export interface Middleware {
  * @param middlewares The middleware chain to be applied.
  * @returns A store enhancer applying the middleware.
  */
-export function applyMiddleware(...middlewares: Middleware[]): GenericStoreEnhancer;
+export function applyMiddleware(...middlewares: GenericMiddleware[]): GenericStoreEnhancer;
 
 
 /* action creators */

test/typescript/middleware.ts

@@ -1,5 +1,5 @@
 import {
-  Middleware, MiddlewareAPI,
+  Middleware, GenericMiddleware, MiddlewareAPI,
   applyMiddleware, createStore, Dispatch, Reducer, Action
 } from "../../index";
 
@@ -11,7 +11,15 @@ declare module "../../index" {
 
 type Thunk<S, O> = (dispatch: Dispatch<S>, getState: () => S) => O;
 
-const thunkMiddleware: Middleware =
+const thunkSpecificMiddleware: Middleware<State> =
+  ({dispatch, getState}: MiddlewareAPI<State>) =>
+    (next: Dispatch<State>) =>
+      <A extends Action, B>(action: A | Thunk<State, B>): B|Action =>
+        typeof action === 'function' ?
+          (<Thunk<State, B>>action)(dispatch, getState) :
+          next(<A>action)
+
+const thunkGenericMiddleware: GenericMiddleware =
   <S>({dispatch, getState}: MiddlewareAPI<S>) =>
     (next: Dispatch<S>) =>
       <A extends Action, B>(action: A | Thunk<S, B>): B|Action =>
@@ -20,7 +28,23 @@ const thunkMiddleware: Middleware =
           next(<A>action)
 
 
-const loggerMiddleware: Middleware =
+const loggerSpecificMiddleware: Middleware<State> =
+  ({getState}: MiddlewareAPI<State>) =>
+    (next: Dispatch<State>) =>
+      (action: any): any => {
+        console.log('will dispatch', action)
+
+        // Call the next dispatch method in the middleware chain.
+        const returnValue = next(action)
+
+        console.log('state after dispatch', getState())
+
+        // This will likely be the action itself, unless
+        // a middleware further in chain changed it.
+        return returnValue
+      }
+
+const loggerGenericMiddleware: GenericMiddleware =
   <S>({getState}: MiddlewareAPI<S>) =>
     (next: Dispatch<S>) =>
       (action: any): any => {
@@ -47,7 +71,7 @@ const reducer: Reducer<State> = (state: State, action: Action): State => {
 
 const storeWithThunkMiddleware = createStore(
   reducer,
-  applyMiddleware(thunkMiddleware)
+  applyMiddleware(thunkGenericMiddleware)
 );
 
 storeWithThunkMiddleware.dispatch(
@@ -60,5 +84,5 @@ storeWithThunkMiddleware.dispatch(
 
 const storeWithMultipleMiddleware = createStore(
   reducer,
-  applyMiddleware(loggerMiddleware, thunkMiddleware)
+  applyMiddleware(loggerGenericMiddleware, thunkGenericMiddleware)
 )