From cf071172e60eff1ac4b1e8272a71d788563b5f2c Mon Sep 17 00:00:00 2001
From: Pavel Lang <langpavel@phpskelet.org>
Date: Sun, 5 Jun 2016 19:05:23 +0200
Subject: [PATCH] Enhanced Redux Logger

---
 src/store/configureStore.js       | 15 ++-------------
 src/store/logger/logger.client.js |  7 +++++++
 src/store/logger/logger.server.js | 12 ++++++++++++
 src/store/logger/package.json     |  6 ++++++
 4 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/store/logger/logger.client.js
 create mode 100644 src/store/logger/logger.server.js
 create mode 100644 src/store/logger/package.json

diff --git a/src/store/configureStore.js b/src/store/configureStore.js
index 9b47755f9..153fa17ab 100644
--- a/src/store/configureStore.js
+++ b/src/store/configureStore.js
@@ -2,6 +2,7 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from '../reducers';
 import createHelpers from './createHelpers';
+import createLogger from './logger';
 
 export default function configureStore(initialState, helpersConfig) {
   const helpers = createHelpers(helpersConfig);
@@ -10,19 +11,7 @@ export default function configureStore(initialState, helpersConfig) {
   let enhancer;
 
   if (__DEV__) {
-    if (process.env.BROWSER) {
-      const createLogger = require('redux-logger'); // eslint-disable-line global-require
-      middleware.push(createLogger({
-        collapsed: true,
-      }));
-    } else {
-      // Server side redux action logger
-      middleware.push(store => next => action => { // eslint-disable-line no-unused-vars
-        const payload = JSON.stringify(action.payload);
-        console.log(` * ${action.type}: ${payload}`); // eslint-disable-line no-console
-        return next(action);
-      });
-    }
+    middleware.push(createLogger());
 
     // https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension
     let devToolsExtension = f => f;
diff --git a/src/store/logger/logger.client.js b/src/store/logger/logger.client.js
new file mode 100644
index 000000000..b413011c1
--- /dev/null
+++ b/src/store/logger/logger.client.js
@@ -0,0 +1,7 @@
+import reduxLogger from 'redux-logger';
+
+export default function createLogger() {
+  return reduxLogger({
+    collapsed: true,
+  });
+}
diff --git a/src/store/logger/logger.server.js b/src/store/logger/logger.server.js
new file mode 100644
index 000000000..cdfab17de
--- /dev/null
+++ b/src/store/logger/logger.server.js
@@ -0,0 +1,12 @@
+import { inspect } from 'util';
+
+// Server side redux action logger
+export default function createLogger() {
+  return store => next => action => { // eslint-disable-line no-unused-vars
+    const formattedPayload = inspect(action.payload, {
+      colors: true,
+    });
+    console.log(` * ${action.type}: ${formattedPayload}`); // eslint-disable-line no-console
+    return next(action);
+  };
+}
diff --git a/src/store/logger/package.json b/src/store/logger/package.json
new file mode 100644
index 000000000..11a9223e0
--- /dev/null
+++ b/src/store/logger/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "name": "redux-logger-middleware",
+  "main": "./logger.server.js",
+  "browser": "./logger.client.js"
+}