React Redux Logger

We can have good logs when we are using Redux in dev tools console. This is very good to debugging.

Setup

1. In any React project using redux, install the following packages:

yarn add -D redux-logger

2. Create a store file, and use the applyMiddleware function to add the logger middleware.

Using createStore from redux:

// store.js

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

export default createStore(rootReducer, applyMiddleware(logger))

Using configureStore from redux toolkit:

// store.js

import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
import rootReducer from './rootReducer'
import logger from 'redux-logger'

export default configureStore({
  reducer: rootReducer,
  middleware: [logger]
})

After that, we can see the logs in the console when we dispatch an action.

We have the following information:

• action type
• previous state
• next state
• action payload