Upgrading Redux Middleware with Redux v5.0.0

Demonstrate the process of updating middleware to comply with the new Redux v5.0.0 API, showcasing a before-and-after comparison.

// Before: Redux Middleware in versions prior to v5.0.0
const exampleMiddlewareBefore = store => next => action => {
  // Perform some action
  console.log('Dispatching', action);
  let result = next(action);
  // Perform after-action
  console.log('Next state', store.getState());
  return result;
};

This is how middlewares were commonly written before Redux v5.0.0. It showcases a typical middleware structure, with access to the store's `dispatch` and `getState` methods, the `next` dispatcher, and the `action` being handled.

// After: Redux Middleware updated to v5.0.0
import { isAnyOf, createAction } from '@reduxjs/toolkit';

const middlewareAPI = {
  dispatch, // dispatch method reference
  getState, // getState method reference
};

const nextHandler = middlewareAPI => next => action => {
  // Perform some action
  console.log('Dispatching', action);
  let result = next(action);
  // Perform after-action
  console.log('Next state', middlewareAPI.getState());
  return result;
};

const exampleMiddlewareAfter = nextHandler(middlewareAPI);

// Example usage with a specific action creator or action type
const myAction = createAction('myAction');
const myMiddleware = nextHandler({ dispatch, getState }) => next => action => {
  if (isAnyOf(myAction)(action)) {
    console.log('myAction was triggered');
  }
  return next(action);
};

This represents an updated middleware after Redux v5.0.0. Redux Toolkit's `createAction` and `isAnyOf` are used for action creation and handling, respectively. The middleware structure has been altered with a `middlewareAPI` object that contains `dispatch` and `getState` method references. This approach showcases the modern pattern as recommended by the Redux Toolkit.