Middleware Logging in Redux

Every dispatched action flows through middleware. Specific features before dispatched action reaches reducers can be opted-in.

Redux Logger

This library logs actions in developer console, giving traceable stack of user actions.

Middleware is applied in state initialization stage with enhancer applyMiddlware()

    import { applyMiddleware, createStore } from 'redux';
    const store = createStore( reducer,
    undefined, applyMiddleware(...)
    );

To use redux-logger, pass instance to this function

    import { applyMiddleware, createStore } from 'redux';
    import { createLogger } from 'redux-logger';

    const logger = createLogger();
    const store = createStore(reducer,
        undefined, 
        applyMiddleware(logger)
    );

Now, every action should be visible in developer console when dispatched.

Mind, that numerous middlewares can be passed in

applyMiddleware(firstMiddleware, secondMiddleware, ...);

This way, the action will flow through each before it reaches the reducer stage. Hence, it's obvious, that you'd want to log the complete action, after it's been modified by every middleware. Place redux-logger as latter parameter passed to the middleware enhancer.