Redux Common Middleware Collection

0.1.21 verified Thu Apr 23 auth: no javascript abandoned

redux-middleware is an abandoned JavaScript library (current version 0.1.21, last updated over 7 years ago) that provides a collection of common Redux middleware functions. These middlewares address various concerns such as `metaRouter` for handling meta-actions (delay, identity, API, routing, idle, error), `thunk` for asynchronous actions, `readyStatePromise` for promise-based state updates, `logger` for debugging, and `crashReporter` for error handling. The library was explicitly noted in its README as being in early development and not ready for production use, with a warning that it would be changing rapidly. Given its lack of updates since then, it is effectively abandoned. While it aimed to offer a convenient set of utilities for common Redux patterns, its early and unmaintained state makes it unsuitable for modern applications. Key differentiators at the time of its development included a structured approach to meta-action handling and pre-packaged common utilities.

Common errors

error TypeError: Cannot read properties of undefined (reading 'meta') (or similar for 'meta') ↓

cause The `createMetaRouter` middleware expects actions with a `meta` property, but an action without `meta` was dispatched and not properly handled by upstream middleware or the `metaRouter` configuration.

fix

Ensure actions processed by createMetaRouter include a meta field, or that createMetaRouter is configured to handle actions without meta gracefully (though the default implementation directly returns next(action)).

error Error: Middleware is not a function ↓

cause This error often occurs when an individual middleware (e.g., `metaRouter`, `thunk`) is imported incorrectly, or if you try to pass the raw module to `applyMiddleware` instead of its default function export.

fix

When importing individual middlewares, ensure you are importing the default export (e.g., import thunk from 'redux-middleware/lib/thunk') and that it is a function that returns the actual middleware. If applyLogicalMiddleware is used, ensure it is called as a function (e.g., applyLogicalMiddleware()(createStore)).

error Module not found: Can't resolve 'redux-middleware/src/lib/metaRouter' ↓

cause Your build system (e.g., Webpack, Rollup) cannot find the module at the specified path. This often happens when you're trying to import from `/src/lib` in a production build or in an environment that doesn't transpile source files directly from `node_modules`.

fix

Change your import paths from /src/lib to /lib (e.g., import metaRouter from 'redux-middleware/lib/metaRouter'). The /lib directory typically contains the transpiled ES5 version suitable for most environments.

Warnings

breaking This library is explicitly marked as 'in early development' and 'not ready for production use' in its README. It has not been updated in over 7 years (since version 0.1.21 was published). It is considered abandoned and should not be used in any active projects. ↓

fix Migrate to actively maintained Redux middleware alternatives (e.g., `redux-thunk`, `redux-logger`, `redux-saga`, `redux-observable`) or implement custom middleware.

gotcha The library differentiates between ES5 and ES6+ module paths (`redux-middleware/lib` vs `redux-middleware/src/lib`). Using the incorrect path for your build setup will lead to module resolution errors or incorrect code execution. ↓

fix Ensure you are importing from `redux-middleware/lib` for CommonJS/ES5 environments, and potentially `redux-middleware/src/lib` if your build system explicitly processes source files and you intend to use ES6+ features directly from source. For most modern setups, `redux-middleware/lib` will be the correct target.

gotcha The `metaRouter` middleware, a core component for handling meta-actions, is noted in the README as 'Needs work'. This indicates potential instability, incomplete features, or known bugs within that specific middleware. ↓

fix If using `metaRouter`, thoroughly test its behavior for your specific use cases. Given the library's abandoned status, issues in `metaRouter` will likely require manual fixes or reimplementation.

Install

npm install redux-middleware

yarn add redux-middleware

pnpm add redux-middleware

Imports

applyLogicalMiddleware
wrong
```
const { applyLogicalMiddleware } = require('redux-middleware')
```
correct
```
import { applyLogicalMiddleware } from 'redux-middleware'
```
For ES6+ environments. For CommonJS, use the `require` syntax targeting `redux-middleware/lib`.
metaRouter
wrong
```
import { metaRouter } from 'redux-middleware/lib/metaRouter'
```
correct
```
import metaRouter from 'redux-middleware/lib/metaRouter'
```
Individual middlewares are typically default exports from their respective paths. Use `/lib` for ES5/CommonJS, or `/src/lib` for ES6+ source code.

createMetaRouter

wrong

const createMetaRouter = require('redux-middleware/lib/metaRouter').default

correct

import { createMetaRouter } from 'redux-middleware/lib/metaRouter'

This is a named export from the `metaRouter` module. Pathing depends on your ES version as noted above.

Quickstart

This quickstart demonstrates how to configure a Redux store using `applyLogicalMiddleware` from `redux-middleware` to inject its bundled middleware. It shows basic Redux setup with a dummy reducer and store creation.

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { applyLogicalMiddleware } from 'redux-middleware';

// Basic Reducer (for demonstration)
const exampleReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  example: exampleReducer,
});

// Create a store creator that applies the logical middleware
const createStoreWithLogicalMiddleware = applyLogicalMiddleware()(createStore);

// Configure the store
export function configureStore(initialState = {}) {
  return createStoreWithLogicalMiddleware(rootReducer, initialState);
}

// Example usage:
const store = configureStore();
console.log('Initial state:', store.getState());

store.dispatch({ type: 'INCREMENT' });
console.log('State after INCREMENT:', store.getState());

// You would typically use individual middlewares directly via applyMiddleware, e.g.:
// import thunk from 'redux-middleware/lib/thunk';
// const storeWithThunk = createStore(rootReducer, applyMiddleware(thunk));