We'll see how to use this logger with our counter application for the simplest possible case, and then with the regions browser, which will add thunks to the mix. You have to use the applyMiddleware() function (which we already saw in the Doing async actions: redux-thunk section in Chapter 8, Expanding Your Application, when we started using redux-thunk) to add the logger to the process:

// Source file: src/counterApp/store.js

/* @flow */

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

import { reducer } from "./counter.reducer.js";

const logger = createLogger({ diff: true, duration: true });
export const store = createStore(reducer, applyMiddleware(logger));
.
.
.

Of course, you would probably want to enable this only for development, so the last line in the preceding snippet should rather be something like the following:

export const store =
    process.env.NODE_ENV === "development"
        ? createStore(reducer, applyMiddleware(logger))
        : createStore(reducer);
.
.
.

This sets the logger to access every single action that gets dispatched, and to log it including the differences between states and the processing time. We'll get to see how this works soon, but first let's take a look at our second application, which already had some middleware.