Add logging of statediff

package-lock.json

@@ -4420,6 +4420,12 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deep-object-diff": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.0.tgz",
+      "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==",
+      "dev": true
+    },
     "deepmerge": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "buildfile": "^1.2.22",
     "bulma": "^0.7.4",
     "cookie-parser": "^1.4.4",
+    "deep-object-diff": "^1.1.0",
     "history": "^4.9.0",
     "jest": "^24.5.0",
     "lerna": "^3.13.1",

packages/client/src/middleware/ReduxLogger.ts

@@ -0,0 +1,30 @@
+import {AnyAction, Middleware} from 'redux'
+import {diff} from 'deep-object-diff'
+
+export class ReduxLogger {
+  handle: Middleware = store => next => (action: AnyAction) => {
+    const prevState = store.getState()
+    const result = next(action)
+    const nextState = store.getState()
+
+    let type = action.type
+    if ('method' in action && typeof action.method === 'string') {
+      type += ':' + action.method
+    }
+    if ('status' in action && typeof action.status === 'string') {
+      type += ':' + action.status
+    }
+
+    const stateDiff = diff(prevState, nextState)
+    // tslint:disable-next-line
+    console.log(
+      '%s\n  action:    %O\n  stateDiff: %O\n  prevState: %O\n  nextState: %O',
+      type,
+      action,
+      stateDiff,
+      prevState,
+      nextState,
+    )
+    return result
+  }
+}

packages/client/src/middleware/index.ts

@@ -1 +1,2 @@
 export * from './PromiseMiddleware'
+export * from './ReduxLogger'

packages/client/src/store/createStore.ts

@@ -1,4 +1,4 @@
-import {PromiseMiddleware} from '../middleware'
+import {ReduxLogger, PromiseMiddleware} from '../middleware'
 import {
   applyMiddleware,
   createStore as create,
@@ -20,7 +20,10 @@ export interface ICreateStoreParams<State, A extends Action> {
 export function createStore<State, A extends Action>(
   params: ICreateStoreParams<State, A>,
 ) {
-  const middleware = params.middleware || [new PromiseMiddleware().handle]
+  const middleware = params.middleware || [
+    new ReduxLogger().handle,
+    new PromiseMiddleware().handle,
+  ]
   return (state?: DeepPartial<State>) => create(
     params.reducer,
     state,