Introduction to Redux Logger

Redux Logger is a middleware for Redux that logs dispatched actions, the previous state, the next state, and more. It is a helpful tool for debugging and tracking state changes in Redux applications.

Basic Usage

The basic usage of Redux Logger involves adding it to your Redux store configuration.

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

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

Configuration Options

Redux Logger provides various configuration options to customize its behavior.

Collapsed

This option allows you to collapse the log entries for dispatched actions.

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

    const store = createStore(
      rootReducer,
      applyMiddleware(logger({ collapsed: true }))
    );
  

Diff

The `diff` option shows a diff of the state changes.

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

    const store = createStore(
      rootReducer,
      applyMiddleware(logger({ diff: true }))
    );
  

Logging Levels

You can specify the logging levels for actions, prev state, next state, and error.

  
    const loggerOptions = {
      level: 'log',
      duration: true,
      timestamp: true,
      logErrors: true,
    };

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

Example App

Below is an example of a simple Redux application that uses Redux Logger.

Index.js

  
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { createStore, applyMiddleware } from 'redux';
    import logger from 'redux-logger';
    import rootReducer from './reducers';
    import App from './App';

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

    ReactDOM.render(
      
        
      ,
      document.getElementById('root')
    );
  

Reducers.js

  
    import { combineReducers } from 'redux';

    const initialState = {
      count: 0
    };

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

    export default combineReducers({
      counter
    });
  

Actions.js

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

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

App.js

  
    import React from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    import { increment, decrement } from './actions';

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

      return (
        

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

    export default App;
  

Hash: 0571183e3a58b495b06f3459957d77deee95dcaa36fee4c6ee6ef85c4d042250