Understanding Redux Middleware: Concepts, Implementation, and Asynchronous Extensions

The author, a front‑end engineer at Qunar, introduces middleware in a broad sense and then focuses on how the term evolved in the front‑end world, especially with Express and React‑Router, where middleware acts as an extensible hook for controlling data flow.

In Redux, middleware provides a third‑party insertion point between the dispatch of an action and its arrival at the reducer. The article first shows the raw action flow without middleware, where store.dispatch(action) synchronously invokes the reducer and updates the state.

To add logging without middleware, the author demonstrates a naïve hack that overwrites store.dispatch to log before and after the original dispatch, but points out two serious problems: later middleware lose access to the original dispatch function, and calling store.dispatch inside a middleware can cause a stack overflow.

The official way to write Redux middleware is then presented. A simple logging middleware is defined as:

const patchLog = store => next => action => { console.log('dispatching', action); const result = next(action); console.log('next state', store.getState()); return result; }

. It uses the next function to forward the action and can terminate the chain by omitting the call.

Middleware is applied with applyMiddleware(patchLog, patchSomething)(store);. The article provides a concise implementation of applyMiddleware that composes the middleware functions using reduceRight and returns a new store object with an enhanced dispatch method, preserving the original dispatch for later use.

For asynchronous needs, the article examines the popular redux‑thunk middleware. Its source is shown:

function createThunkMiddleware() { return ({dispatch, getState}) => next => action => { if (typeof action === 'function') { return action(dispatch, getState); } return next(action); }; }

. The thunk middleware intercepts function actions, executes them with dispatch and getState, and otherwise passes the action down the chain.

Finally, the author concludes that despite Redux’s age, its elegant design, clear separation of concerns, and flexible middleware system remain valuable lessons for building extensible front‑end frameworks.