Use console.group in ReduxLogger, enable via localStorage

packages/client/src/middleware/ReduxLogger.ts

@@ -2,7 +2,11 @@ import {AnyAction, Middleware} from 'redux'
 import {diff} from 'deep-object-diff'
 
 export class ReduxLogger {
+  constructor(readonly enabled: boolean) {}
   handle: Middleware = store => next => (action: AnyAction) => {
+    if (!this.enabled) {
+      return next(action)
+    }
     const prevState = store.getState()
     const result = next(action)
     const nextState = store.getState()
@@ -17,14 +21,17 @@ export class ReduxLogger {
 
     const stateDiff = diff(prevState, nextState)
     // tslint:disable-next-line
+    console.group(type)
+    // tslint:disable-next-line
     console.log(
-      '%s\n  action:    %O\n  stateDiff: %O\n  prevState: %O\n  nextState: %O',
-      type,
+      'action:    %O\nstateDiff: %O\nprevState: %O\nnextState: %O',
       action,
       stateDiff,
       prevState,
       nextState,
     )
+    // tslint:disable-next-line
+    console.groupEnd()
     return result
   }
 }

packages/client/src/store/createStore.ts

@@ -21,7 +21,9 @@ export function createStore<State, A extends Action>(
   params: ICreateStoreParams<State, A>,
 ) {
   const middleware = params.middleware || [
-    new ReduxLogger().handle,
+    new ReduxLogger(
+      window && window.localStorage && window.localStorage.log,
+    ).handle,
     new PromiseMiddleware().handle,
   ]
   return (state?: DeepPartial<State>) => create(