redux-logger

What is redux-logger?

redux-logger is a middleware for Redux that logs actions and state changes to the console, making it easier to debug and understand the flow of data in your application.

What are redux-logger's main functionalities?

Basic Logging

This feature logs every action and the resulting new state to the console. It helps developers see what actions are being dispatched and how the state is changing in response.

const { createStore, applyMiddleware } = require('redux');
const logger = require('redux-logger').createLogger();
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });

Collapsed Logging

This feature collapses the log entries for each action, making the console output more compact and easier to navigate, especially when dealing with a large number of actions.

const { createStore, applyMiddleware } = require('redux');
const { createLogger } = require('redux-logger');
const logger = createLogger({ collapsed: true });
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });

Predicate Logging

This feature allows you to filter which actions get logged based on a predicate function. In this example, actions of type 'IGNORED_ACTION' will not be logged.

const { createStore, applyMiddleware } = require('redux');
const { createLogger } = require('redux-logger');
const logger = createLogger({ predicate: (getState, action) => action.type !== 'IGNORED_ACTION' });
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });
store.dispatch({ type: 'IGNORED_ACTION' });

Other packages similar to redux-logger

redux-devtools-extension

redux-devtools-extension is a package that integrates Redux with the Redux DevTools browser extension. It provides a more visual and interactive way to inspect actions and state changes, including time-travel debugging, which is not available in redux-logger.

redux-immutable-state-invariant

redux-immutable-state-invariant is a middleware that logs warnings when the state is mutated. While it doesn't log actions and state changes like redux-logger, it helps catch bugs related to state mutations, which can be a complementary tool for debugging Redux applications.

README

Logger for redux

Install

npm i --save redux-logger

Usage

import createLogger from 'redux-logger';

const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
const store = createStoreWithMiddleware(reducer);

API

redux-logger exposes single constructor function for creating logger middleware.

createLogger(options?: Object)

Options

level (String)

Level of console. warn, error, info or else.

logger (Object)

Implementation of the console API. Useful if you are using a custom, wrapped version of console.

collapsed (Boolean)

Is group collapsed?

predicate (getState: Function, action: Object): boolean

If specified this function will be called before each action is processed with this middleware. Receives getState function for accessing current store state and action object as parameters. Returns true if action should be logged, false otherwise.

Examples:

log only in dev mode

const __DEV__ = true;

createLogger({
  predicate: (getState, action) => __DEV__
});

log everything except actions with type AUTH_REMOVE_TOKEN

createLogger({
  predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});

License

MIT