Fix loggerMiddleware

client/assets/javascripts/middleware/loggerMiddleware.js

@@ -1,16 +1,24 @@
-import { createStore, applyMiddleware } from 'redux';
+/* eslint no-console: 0 */
 
-function logger({ getState }) {
-  return (next) => (action) => {
+export default function logger({ getState }) {
+  return next => action => {
     console.log('will dispatch', action);
 
     // Call the next dispatch method in the middleware chain.
-    let returnValue = next(action);
+    const result = next(action);
 
-    console.log('state after dispatch', getState());
+    // We can't _read_ immutable objects in console out-of-the-box.
+    const immutableState = getState();
+    const readableState = {};
+    for (const storeItem in immutableState) {
+      if (immutableState.hasOwnProperty(storeItem)) {
+        readableState[storeItem] = immutableState[storeItem].toJS();
+      }
+    }
+    console.log('state after dispatch', readableState);
 
     // This will likely be the action itself, unless
     // a middleware further in chain changed it.
-    return returnValue;
+    return result;
   };
 }

client/assets/javascripts/stores/CommentStore.js

@@ -1,10 +1,8 @@
 import { createStore, applyMiddleware, combineReducers } from 'redux';
 import thunk from 'redux-thunk';
 import reducers from '../reducers';
-
-// Smth wrong with this one, off for now
-// import loggerMiddleware from '../middleware/loggerMiddleware';
+import loggerMiddleware from '../middleware/loggerMiddleware';
 
 // applyMiddleware supercharges createStore with middleware:
-const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const createStoreWithMiddleware = applyMiddleware(thunk, loggerMiddleware)(createStore);
 export default createStoreWithMiddleware(combineReducers(reducers));