diff --git a/README.md b/README.md index 95aa171..0654a96 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ import { applyMiddleware, createStore } from 'redux'; // Logger with default options -import { logger } from 'redux-logger' +import logger from 'redux-logger' const store = createStore( reducer, applyMiddleware(logger) @@ -40,7 +40,7 @@ const store = createStore( Or you can create your own logger with custom [options](https://github.com/evgenyrodionov/redux-logger#options): ```javascript import { applyMiddleware, createStore } from 'redux'; -import createLogger from 'redux-logger' +import { createLogger } from 'redux-logger' const logger = createLogger({ // ...options @@ -172,12 +172,14 @@ Filter states diff for certain cases. ## Recipes ### Log only in development ```javascript -import thunk from 'redux-thunk'; - -const middlewares = [thunk]; +const middlewares = []; if (process.env.NODE_ENV === `development`) { - const { logger } = require(`redux-logger`); + const { createLogger } = require(`redux-logger`); + const logger = createLogger({ + // ...options + }); + middlewares.push(logger); } diff --git a/example/src/components/example.jsx b/example/src/components/example.jsx index aced14c..864a555 100644 --- a/example/src/components/example.jsx +++ b/example/src/components/example.jsx @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import * as AuthActions from 'actions/auth'; +import { setToken, removeToken, setInfo } from 'actions/auth'; import uuid from 'uuid'; @@ -10,15 +9,15 @@ const { Grid } = UI; class Example extends Component { updateToken() { - this.props.actions.setToken(uuid.v4()); + this.props.dispatch(setToken(uuid.v4())); } removeToken() { - this.props.actions.removeToken(); + this.props.dispatch(removeToken()); } loadUser() { - this.props.actions.setInfo(1, `theaqua`); + this.props.dispatch(setInfo(1, `evgenyrodionov`)); } render() { @@ -28,7 +27,7 @@ class Example extends Component { -

Auth actions

+

Actions

@@ -41,18 +40,12 @@ class Example extends Component { Load user info - -
-

State info

+

State

{JSON.stringify(this.props.state, null, 2)}
@@ -62,6 +55,5 @@ class Example extends Component { } const pickState = (state) => ({ state }); -const pickActions = (dispatch) => ({ actions: bindActionCreators(AuthActions, dispatch) }); -export default connect(pickState, pickActions)(Example); +export default connect(pickState)(Example); diff --git a/example/src/index.js b/example/src/index.js index 0979664..fd7b142 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -3,7 +3,7 @@ import 'styles/base'; import React from 'react'; import { render } from 'react-dom'; -import createLogger from 'redux-logger'; +import { createLogger } from '../../src'; import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import { Provider } from 'react-redux'; @@ -13,8 +13,7 @@ import reducers from 'reducers'; import { AUTH_REMOVE_TOKEN, AUTH_SET_TOKEN } from 'constants/auth'; const logger = createLogger({ - predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN, // log all actions except AUTH_REMOVE_TOKEN - duration: true, + collapsed: true, }); const reducer = combineReducers(reducers); diff --git a/package.json b/package.json index a0336d6..e00b6fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "redux-logger", - "version": "2.10.2", + "version": "3.0.0", "description": "Logger for Redux", "main": "lib/index.js", "scripts": { diff --git a/spec/index.spec.js b/spec/index.spec.js index 6737fba..0e7d200 100644 --- a/spec/index.spec.js +++ b/spec/index.spec.js @@ -1,40 +1,59 @@ import { expect } from 'chai'; - -import { repeat } from 'helpers'; +import sinon from 'sinon'; import { applyMiddleware, createStore } from 'redux'; -import sinon from 'sinon'; - -import createLogger from '../src'; +import { repeat } from 'helpers'; +import logger, { createLogger } from '../src'; context(`Helpers`, () => { - describe(`'repeat'`, () => { + describe(`repeat`, () => { it(`should repeat a string the number of indicated times`, () => { expect(repeat(`teacher`, 3)).to.equal(`teacherteacherteacher`); }); }); }); -context('createLogger', () => { - describe('initialization', () => { +context(`default logger`, () => { + describe(`init`, () => { beforeEach(() => { - sinon.spy(console, 'error'); + sinon.spy(console, `error`); }); afterEach(() => { console.error.restore(); }); - it('should log an error if the function is passed to applyMiddleware', () => { + it(`should be ok`, () => { + const store = createStore(() => ({}), applyMiddleware(logger)); + + store.dispatch({ type: `foo` }); + sinon.assert.notCalled(console.error); + }); + }); +}); + +context(`createLogger`, () => { + describe(`init`, () => { + beforeEach(() => { + sinon.spy(console, `error`); + }); + + afterEach(() => { + console.error.restore(); + }); + + it(`should throw error if passed direct to applyMiddleware`, () => { const store = createStore(() => ({}), applyMiddleware(createLogger)); - store.dispatch({ type: 'foo' }); + + store.dispatch({ type: `foo` }); sinon.assert.calledOnce(console.error); }); - it('should not log an error if the correct function is passed', () => { + it(`should be ok`, () => { const store = createStore(() => ({}), applyMiddleware(createLogger())); - store.dispatch({ type: 'foo' }); + + store.dispatch({ type: `foo` }); sinon.assert.notCalled(console.error); }); }); diff --git a/src/index.js b/src/index.js index 2e351f9..f9caeb1 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,6 @@ function createLogger(options = {}) { const { logger, - transformer, stateTransformer, errorTransformer, predicate, @@ -42,30 +41,21 @@ function createLogger(options = {}) { return () => next => action => next(action); } - if (transformer) { - console.error(`Option 'transformer' is deprecated, use 'stateTransformer' instead!`); // eslint-disable-line no-console - } - // Detect if 'createLogger' was passed directly to 'applyMiddleware'. if (options.getState && options.dispatch) { // eslint-disable-next-line no-console console.error(`[redux-logger] redux-logger not installed. Make sure to pass logger instance as middleware: - // Logger with default options import { logger } from 'redux-logger' const store = createStore( reducer, applyMiddleware(logger) ) - - // Or you can create your own logger with custom options http://bit.ly/redux-logger-options import createLogger from 'redux-logger' - const logger = createLogger({ // ...options }); - const store = createStore( reducer, applyMiddleware(logger) @@ -84,6 +74,7 @@ const store = createStore( } const logEntry = {}; + logBuffer.push(logEntry); logEntry.started = timer.now(); @@ -115,11 +106,26 @@ const store = createStore( }; } -const defaultLogger = createLogger(); +const defaultLogger = ({ dispatch, getState } = {}) => { + if (typeof dispatch === `function` || typeof getState === `function`) { + return createLogger()({ dispatch, getState }); + } else { + // eslint-disable-next-line no-console + console.error(` +[redux-logger v3] BREAKING CHANGE +[redux-logger v3] Since 3.0.0 redux-logger exports by default logger with default settings. +[redux-logger v3] Change +[redux-logger v3] import createLogger from 'redux-logger' +[redux-logger v3] to +[redux-logger v3] import { createLogger } from 'redux-logger' +`); + } +}; export { defaults, + createLogger, defaultLogger as logger, }; -export default createLogger; +export default defaultLogger;