Introduction to redux-logger

redux-logger is a popular middleware for Redux that logs actions in the console, making it easier to debug state changes in your application. This guide provides a comprehensive look into the redux-logger library and its APIs, complete with code snippets and an app example to get you started.

Setting Up redux-logger

First, you need to install redux-logger via npm or yarn:

  
    npm install redux-logger
    # or
    yarn add redux-logger
  

Basic Usage

Here’s how to apply redux-logger as middleware to your Redux store:

  
    import { createStore, applyMiddleware } from 'redux';
    import { createLogger } from 'redux-logger';
    import rootReducer from './reducers';

    const logger = createLogger();
    const store = createStore(rootReducer, applyMiddleware(logger));
  

Customizing redux-logger

The createLogger function accepts an options object to customize behavior:

  
    const logger = createLogger({
      collapsed: true,
      diff: true,
      duration: true,
      level: 'info',
      logErrors: true,
      timestamp: true
    });
  

Here are some commonly used options:

• collapsed: Collapse log messages
• diff: Show difference between states
• duration: Display action duration
• level: Set log level (info, warn, error)
• logErrors: Log errors in the console
• timestamp: Add timestamps to actions

Advanced Usage Examples

Here are some advanced configurations and usage examples:

Log Skipping Specific Actions

  
    const logger = createLogger({
      predicate: (getState, action) => action.type !== 'IGNORED_ACTION'
    });
  

Transforming State or Action

  
    const logger = createLogger({
      stateTransformer: state => ({ ...state, user: '***' }),
      actionTransformer: action => ({ ...action, type: action.type.toLowerCase() })
    });
  

Combining with Other Middleware

  
    const logger = createLogger();
    const anotherMiddleware = store => next => action => {
      // Custom middleware logic
      return next(action);
    };
    const store = createStore(rootReducer, applyMiddleware(logger, anotherMiddleware));
  

App Example

Let’s create a simple counter app with Redux and redux-logger:

Step 1: Setup Redux Store

  
    import { createStore, applyMiddleware } from 'redux';
    import { createLogger } from 'redux-logger';

    const initialState = { count: 0 };

    function counterReducer(state = initialState, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { count: state.count + 1 };
        case 'DECREMENT':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }

    const logger = createLogger();
    const store = createStore(counterReducer, applyMiddleware(logger));
  

Step 2: Create Redux Actions

  
    const increment = () => ({ type: 'INCREMENT' });
    const decrement = () => ({ type: 'DECREMENT' });
  

Step 3: Connect Redux to React

  
    import React from 'react';
    import { Provider, useSelector, useDispatch } from 'react-redux';
    import { createStore, applyMiddleware } from 'redux';
    import { createLogger } from 'redux-logger';

    const initialState = { count: 0 };

    function counterReducer(state = initialState, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { count: state.count + 1 };
        case 'DECREMENT':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }

    const logger = createLogger();
    const store = createStore(counterReducer, applyMiddleware(logger));

    function Counter() {
      const count = useSelector(state => state.count);
      const dispatch = useDispatch();

      return (
        

          
Count: {count}
           dispatch(increment())}>Increment
           dispatch(decrement())}>Decrement
        
      );
    }

    function App() {
      return (
        
          
        
      );
    }

    export default App;
  

This code sets up a simple counter app with Redux and redux-logger to track state changes in the console. You can see the actions being dispatched and the state changes logged.

Hash: 0571183e3a58b495b06f3459957d77deee95dcaa36fee4c6ee6ef85c4d042250