Logger for Redux
Install
npm i --save redux-logger
Usage
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, promise, logger)(createStore);
const store = createStoreWithMiddleware(reducer);
Logger must be last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).
API
redux-logger
exposes single constructor function for creating logger middleware.
createLogger(options?: Object) => LoggerMiddleware
Options
level (String)
Level of console
. warn
, error
, info
or else.
Default: log
duration (Boolean)
Print duration of each action?
Default: false
timestamp (Boolean)
Print timestamp with each action?
Default: true
colors (Object)
Object with color getter functions: title
, prevState
, action
, nextState
, error
. Useful if you want to paint
message based on specific state or action. Set any of them to false
if you want to show plain message without colors.
title(action: Object) => color: String
prevState(prevState: Object) => color: String
action(action: Object) => color: String
nextState(nextState: Object) => color: String
error(error: Any, prevState: Object) => color: String
logger (Object)
Implementation of the console
API. Useful if you are using a custom, wrapped version of console
.
Default: window.console
logErrors (Boolean)
Should the logger catch, log, and re-throw errors? This makes it clear which action triggered the error but makes "break on error" in dev tools harder to use, as it breaks on re-throw rather than the original throw location.
Default: true
collapsed = (getState: Function, action: Object) => Boolean
Takes a boolean or optionally a function that receives getState
function for accessing current store state and action
object as parameters. Returns true
if the log group should be collapsed, false
otherwise.
Default: false
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.
Default: null
(always log)
stateTransformer = (state: Object) => state
Transform state before print. Eg. convert Immutable object to plain JSON.
Default: identity function
actionTransformer = (action: Function) => action
Transform action before print. Eg. convert Immutable object to plain JSON.
Default: identity function
errorTransformer = (error: Any) => error
Transform error before print.
Default: identity function
Recipes
log only in dev mode
import thunk from 'redux-thunk';
const middlewares = [thunk];
if (process.env.NODE_ENV === `development`) {
const createLogger = require(`redux-logger`);
const logger = createLogger();
middlewares.push(logger);
}
const store = compose(applyMiddleware(...middlewares))(createStore)(reducer);
AUTH_REMOVE_TOKEN
log everything except actions with type createLogger({
predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});
FORM_CHANGE
collapse actions with type createLogger({
collapsed: (getState, action) => action.type === FORM_CHANGE
});
transform Immutable objects into JSON
const stateTransformer = (state) => {
let newState = {};
if (typeof state === "object" && state !== null && Object.keys(state).length) {
for (var i of Object.keys(state)) {
if (Immutable.Iterable.isIterable(state[i])) {
newState[i] = state[i].toJS();
} else {
newState[i] = stateTransformer(state[i]);
}
}
} else {
newState = state;
}
return newState;
}
const logger = createLogger({
stateTransformer,
});
log batched actions
Thanks to @smashercosmo
import createLogger from 'redux-logger';
const actionTransformer = action => {
if (action.type === 'BATCHING_REDUCER.BATCH') {
action.payload.type = action.payload.reduce((result, next) => {
const prefix = result ? result + ' => ' : '';
return prefix + next.type;
}, '');
return action.payload;
}
return action;
};
const level = 'info';
const logger = {};
for (const method in console) {
if (typeof console[method] === 'function') {
logger[method] = console[method].bind(console);
}
}
logger[level] = function levelFn(...args) {
const lastArg = args.pop();
if (Array.isArray(lastArg)) {
return lastArg.forEach(item => {
console[level].apply(console, [...args, item]);
});
}
console[level].apply(console, arguments);
};
export default createLogger({
level,
actionTransformer,
logger
});
License
MIT