Skip to content

Commit d59de69

Browse files
author
David Hahn
committed
Improve typings for Middleware
1 parent 64fee67 commit d59de69

File tree

2 files changed

+35
-7
lines changed

2 files changed

+35
-7
lines changed

index.d.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,11 @@ export interface MiddlewareAPI<S> {
278278
* logging actions, performing side effects like routing, or turning an
279279
* asynchronous API call into a series of synchronous actions.
280280
*/
281-
export interface Middleware {
281+
export interface Middleware<S> {
282+
(api: MiddlewareAPI<S>): (next: Dispatch<S>) => Dispatch<S>;
283+
}
284+
285+
export interface GenericMiddleware {
282286
<S>(api: MiddlewareAPI<S>): (next: Dispatch<S>) => Dispatch<S>;
283287
}
284288

@@ -299,7 +303,7 @@ export interface Middleware {
299303
* @param middlewares The middleware chain to be applied.
300304
* @returns A store enhancer applying the middleware.
301305
*/
302-
export function applyMiddleware(...middlewares: Middleware[]): GenericStoreEnhancer;
306+
export function applyMiddleware(...middlewares: GenericMiddleware[]): GenericStoreEnhancer;
303307

304308

305309
/* action creators */

test/typescript/middleware.ts

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
Middleware, MiddlewareAPI,
2+
Middleware, GenericMiddleware, MiddlewareAPI,
33
applyMiddleware, createStore, Dispatch, Reducer, Action
44
} from "../../index";
55

@@ -11,7 +11,15 @@ declare module "../../index" {
1111

1212
type Thunk<S, O> = (dispatch: Dispatch<S>, getState: () => S) => O;
1313

14-
const thunkMiddleware: Middleware =
14+
const thunkSpecificMiddleware: Middleware<State> =
15+
({dispatch, getState}: MiddlewareAPI<State>) =>
16+
(next: Dispatch<State>) =>
17+
<A extends Action, B>(action: A | Thunk<State, B>): B|Action =>
18+
typeof action === 'function' ?
19+
(<Thunk<State, B>>action)(dispatch, getState) :
20+
next(<A>action)
21+
22+
const thunkGenericMiddleware: GenericMiddleware =
1523
<S>({dispatch, getState}: MiddlewareAPI<S>) =>
1624
(next: Dispatch<S>) =>
1725
<A extends Action, B>(action: A | Thunk<S, B>): B|Action =>
@@ -20,7 +28,23 @@ const thunkMiddleware: Middleware =
2028
next(<A>action)
2129

2230

23-
const loggerMiddleware: Middleware =
31+
const loggerSpecificMiddleware: Middleware<State> =
32+
({getState}: MiddlewareAPI<State>) =>
33+
(next: Dispatch<State>) =>
34+
(action: any): any => {
35+
console.log('will dispatch', action)
36+
37+
// Call the next dispatch method in the middleware chain.
38+
const returnValue = next(action)
39+
40+
console.log('state after dispatch', getState())
41+
42+
// This will likely be the action itself, unless
43+
// a middleware further in chain changed it.
44+
return returnValue
45+
}
46+
47+
const loggerGenericMiddleware: GenericMiddleware =
2448
<S>({getState}: MiddlewareAPI<S>) =>
2549
(next: Dispatch<S>) =>
2650
(action: any): any => {
@@ -47,7 +71,7 @@ const reducer: Reducer<State> = (state: State, action: Action): State => {
4771

4872
const storeWithThunkMiddleware = createStore(
4973
reducer,
50-
applyMiddleware(thunkMiddleware)
74+
applyMiddleware(thunkGenericMiddleware)
5175
);
5276

5377
storeWithThunkMiddleware.dispatch(
@@ -60,5 +84,5 @@ storeWithThunkMiddleware.dispatch(
6084

6185
const storeWithMultipleMiddleware = createStore(
6286
reducer,
63-
applyMiddleware(loggerMiddleware, thunkMiddleware)
87+
applyMiddleware(loggerGenericMiddleware, thunkGenericMiddleware)
6488
)

0 commit comments

Comments
 (0)