npm i --save redux-logger
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(thunk, promise, logger)
);
// Note passing middleware as the third argument requires redux@>=3.1.0Logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).
redux-logger exposes single constructor function for creating logger middleware.
createLogger(options?: Object) => LoggerMiddleware
{
level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level
duration = false: Boolean, // Print the duration of each action?
timestamp = true: Boolean, // Print the timestamp with each action?
colors: ColorsObject, // Object with color getters. See the ColorsObject interface.
logger = console: LoggerObject, // Implementation of the `console` API.
logErrors = true: Boolean, // Should the logger catch, log, and re-throw errors?
collapsed, // 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.
predicate, // If specified this function will be called before each action is processed with this middleware.
stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
actionTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
errorTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
titleFormatter, // Format the title used when logging actions.
diff = false: Boolean, // Show diff between states.
diffPredicate // Filter function for showing states diff.'
}Level of console. warn, error, info or else.
It can be a function (action: Object) => level: String.
It can be an object with level string for: prevState, action, nextState, error
It can be an object with getter functions: prevState, action, nextState, error. Useful if you want to print
message based on specific state or action. Set any of them to false if you want to hide it.
prevState(prevState: Object) => level: Stringaction(action: Object) => level: StringnextState(nextState: Object) => level: Stringerror(error: Any, prevState: Object) => level: String
Default: log
Print duration of each action?
Default: false
Print timestamp with each action?
Default: true
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: StringprevState(prevState: Object) => color: Stringaction(action: Object) => color: StringnextState(nextState: Object) => color: Stringerror(error: Any, prevState: Object) => color: String
Implementation of the console API. Useful if you are using a custom, wrapped version of console.
Default: console
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
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
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)
Transform state before print. Eg. convert Immutable object to plain JSON.
Default: identity function
Transform action before print. Eg. convert Immutable object to plain JSON.
Default: identity function
Transform error before print.
Default: identity function
Format the title used for each action.
Default: prints something like action @ ${time} ${action.type} (in ${took.toFixed(2)} ms)
Show states diff.
Default: false
Filter states diff for certain cases.
Default: undefined
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);createLogger({
predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});createLogger({
collapsed: (getState, action) => action.type === FORM_CHANGE
});createLogger({
collapsed: (getState, action, logEntry) => !logEntry.error
});import { Iterable } from 'immutable';
const stateTransformer = (state) => {
if (Iterable.isIterable(state)) return state.toJS();
else return state;
};
const logger = createLogger({
stateTransformer,
});const logger = createLogger({
stateTransformer: (state) => {
let newState = {};
for (var i of Object.keys(state)) {
if (Immutable.Iterable.isIterable(state[i])) {
newState[i] = state[i].toJS();
} else {
newState[i] = state[i];
}
};
return newState;
}
});Thanks to @smashercosmo
import createLogger from 'redux-logger';
const actionTransformer = action => {
if (action.type === 'BATCHING_REDUCER.BATCH') {
action.payload.type = action.payload.map(next => next.type).join(' => ');
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
});- Performance issues in react-native (#32)
MIT