Custom Logger Middleware with Types

Build a custom logging middleware that provides type-safe access to actions and state, showing how to implement conditional logging based on action types or state shape.

function customLoggerMiddleware(storeApi) {
  return function(next) {
    return function(action) {
      // Perform conditional logging
      if (action.type === 'CRITICAL_ACTION') {
        console.log('Performing a critical action:', action);
      }

      // Log the previous state
      console.log('Previous state:', storeApi.getState());

      // Call the next dispatch in the middleware chain
      const returnValue = next(action);

      // Log the next state
      console.log('Next state:', storeApi.getState());

      // Optionally log the action
      console.log('Action dispatched:', action);

      // Return the return value from the next middleware
      return returnValue;
    };
  };
}

Defines a custom logger middleware function that logs actions and states. It conditionally logs actions based on their types and always logs the previous and next states as actions are dispatched through the middleware.