Blog>
Snippets

Converting CJS Redux Middleware to ESM Syntax

Demonstrate the process of refactoring a Redux middleware from CommonJS to ES Module syntax to ensure compatibility with Redux v5.0.0.
// Original CommonJS Middleware
const exampleMiddleware = store => next => action => {
  // Middleware logic here
  return next(action);
};

module.exports = exampleMiddleware;
This is the original Redux middleware using CommonJS syntax, where the middleware is a function curried three times, taking store, next, and action respectively. It's exported using 'module.exports'.
// Converted ESM Middleware
export const exampleMiddleware = store => next => action => {
  // Middleware logic here
  return next(action);
};
Converted middleware to ES Module syntax. The middleware's structure remains the same, but it's exported with 'export' instead of 'module.exports'. This is now ES Module (ESM) compliant and can be imported with an 'import' statement.