diff --git a/package-lock.json b/package-lock.json index 35c7047..ef82ec2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 237feec..affaa86 100644 --- a/package.json +++ b/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", diff --git a/packages/client/src/middleware/ReduxLogger.ts b/packages/client/src/middleware/ReduxLogger.ts new file mode 100644 index 0000000..b360364 --- /dev/null +++ b/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 + } +} diff --git a/packages/client/src/middleware/index.ts b/packages/client/src/middleware/index.ts index b59310b..d144926 100644 --- a/packages/client/src/middleware/index.ts +++ b/packages/client/src/middleware/index.ts @@ -1 +1,2 @@ export * from './PromiseMiddleware' +export * from './ReduxLogger' diff --git a/packages/client/src/store/createStore.ts b/packages/client/src/store/createStore.ts index 94f8d2a..9b5e68e 100644 --- a/packages/client/src/store/createStore.ts +++ b/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 { export function createStore( params: ICreateStoreParams, ) { - const middleware = params.middleware || [new PromiseMiddleware().handle] + const middleware = params.middleware || [ + new ReduxLogger().handle, + new PromiseMiddleware().handle, + ] return (state?: DeepPartial) => create( params.reducer, state,