redux-listener-middleware

0.2.0 verified Sat Apr 25 auth: no javascript maintenance

A Redux middleware that listens for and reacts on Flux actions, allowing side-effects and async operations without thunks. Current stable version is 0.2.0, with a small set of releases. It differentiates itself by using rule-based filtering (regex or function) and action transformation before listener invocation, providing a centralized way to handle async flows while keeping reducers pure. Unlike redux-thunk, actions remain plain objects, and listeners are decoupled from action creators. Active development appears to have stalled.

Common errors

error TypeError: middleware.createListener is not a function ↓

cause Importing wrong symbol or not calling listen() factory.

fix

Use: import listen from 'redux-listener-middleware'; const middleware = listen(); then middleware.createListener(...)

error Cannot find module 'redux-listener-middleware' ↓

cause Package not installed or typo in import path.

fix

Run: npm install redux-listener-middleware (note: 'redux' not 'redux')

error Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. ↓

cause Dispatching a function or promise without thunk middleware; listener is not designed to replace thunks entirely for async actions.

fix

Either keep thunk middleware before listener, or ensure async dispatch returns plain objects.

Warnings

gotcha Peer dependency on redux 3.x; not tested with redux 4+. ↓

fix Use with redux 3.x or upgrade to alternative like redux-saga or redux-observable.

deprecated Package has not been updated since 2016; no TypeScript definitions, no modern ES module bundling. ↓

fix Consider using redux-saga, redux-observable, or @reduxjs/toolkit listener middleware.

gotcha Listener rule transform mutates action (Object.assign) in README example, which may break other middleware or reducers expecting immutability. ↓

fix Return a new object in rule transform instead of mutating: (action) => ({ ...action, payload: '...' })

gotcha No way to remove a listener once added; memory leak if listeners accumulate. ↓

fix Plan lifecycle carefully or use middleware that supports dynamic removal.

deprecated Package appears unmaintained: no repository link in npm, last commit years ago. ↓

fix Migrate to actively maintained alternatives.

Install

npm install redux-listener-middleware

yarn add redux-listener-middleware

pnpm add redux-listener-middleware

Imports

listen

wrong

const { listen } = require('redux-listener-middleware')

correct

import listen from 'redux-listener-middleware'

Default export is a factory function, not a named export.

MiddlewareInstance
wrong
```
new listen()
```
correct
```
const middleware = listen()
```
listen() returns a middleware instance; it is not a constructor.
createListener
wrong
```
listen().createListener(...)
```
correct
```
middleware.createListener((action, dispatch) => { ... })
```
createListener is a method on the returned instance, not static.

Quickstart

Shows setup of middleware, listener with rule that transforms actions before async fetch, and dispatching.

import { createStore, applyMiddleware } from 'redux';
import listen from 'redux-listener-middleware';

const middleware = listen();

middleware.createListener((action, dispatch) => {
  console.log('Received action:', action.type);
  if (action.meta && action.meta.async) {
    fetch(action.payload.url)
      .then(res => res.json())
      .then(data => dispatch({ type: action.type + '_SUCCESS', payload: data }))
      .catch(err => dispatch({ type: action.type + '_FAIL', payload: err }));
  }
}).addRule(/^FETCH_/, (action) => ({ ...action, payload: { url: `/api/${action.type.slice(6).toLowerCase()}` } }));

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer, applyMiddleware(middleware));

dispatch({ type: 'FETCH_USER', meta: { async: true } });