Implementing a Custom Middleware in Redux v5.0.1

This code example demonstrates how to write a custom logging middleware in Redux v5.0.1 to track all dispatched actions and the resulting new state.

import { applyMiddleware, createStore } from 'redux';

// Define a custom logging middleware
const loggingMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  let result = next(action);
  console.log('Next State:', store.getState());
  return result;
};

// A sample reducer
const rootReducer = (state = {}, action) => {
  // reducer logic here
  return state;
};

// Create store with applyMiddleware
const store = createStore(
  rootReducer,
  applyMiddleware(loggingMiddleware)
);

This code creates a custom logging middleware that logs an action and the next state every time an action is dispatched. It then uses applyMiddleware to apply this middleware when creating the Redux store with a sample rootReducer.