Dynamic middleware in Redux

Question

I'm using Redux to write a NodeJS app. I'm interested in allowing users to dynamically load middleware by specifying it at runtime.

How do I dynamically update the middleware of a running Redux application to add or remove middleware?

Answer 1

Middleware is not some separate extension, it's part of what your store is. Swapping it at runtime could lead to inconsistencies. How do you reason about your actions if you don't know what middleware they'll be run through? (Keep in mind that middlewares don't have to operate synchronously.)

You could try a naive implementation like the following:

const middlewares = [];
const middlewareMiddleware = store => next => act => {
  const nextMiddleware = remaining => action => remaining.length
    ? remaining[0](store)(nextMiddleware(remaining.slice(1)))(action)
    : next(action);
  nextMiddleware(middlewares)(act);
};
// ... now add/remove middlewares to/from the array at runtime as you wish

but take note of the middleware contract, particularly the next argument. Each middleware receives a "pass to the next middleware" function as part of its construction. Even if you apply middlewares dynamically, you still need to tell them how to pass their result to the next middleware in line. Now you're faced with a loss-loss choice:

1. action will go through all of the middleware registered at the time it was dispatched (as shown above), even if it was removed or other middleware was added in the meantime, or
2. each time the action is passed on, it goes to the next currently registered middleware (implementation is a trivial excercise), so it's possible for an action to go through a combination of middlewares that were never registered together at a single point in time.

It might be a good idea to avoid these problems alltogether by sticking to static middleware.

Answer 2

Use redux-dynamic-middlewares

https://github.com/pofigizm/redux-dynamic-middlewares