redux-logger-middleware.js

/**
 * Created on 1399/8/22 (2020/11/12).
 * @author {@link https://mirismaili.github.io S. Mahdi Mir-Ismaili}
 */

export default function reduxLogger(store) {
	return function wrapDispatch(next) {
		return function handleAction(action) {
			const state0 = store.getState()
			const result = next(action)
			const state = store.getState()
			
			console.group('%c%s %c%s %c%s %s', 'font-weight:normal;color:#888', 'action',
					'color:#222', action.type,
					'font-weight:normal;color:#888', '@', new Date().toLocaleTimeString())
			{
				// console.groupCollapsed('%c%s', 'font-weight:bold;color:#9E9E9E', 'state0')
				// console.log('%c%s', 'font-weight:bold;color:#9E9E9E', JSON.stringify(state0, null, '\t'))
				// console.groupEnd()
				
				console.log('%c%s\t%o', 'font-weight:bold;color:#9E9E9E', 'state0', state0)
				
				console.log('%c%s\t', 'font-weight:bold;color:#03A9E4', 'action', action)
				
				console.log('%c%s\t%o', 'font-weight:bold;color:#4CAF50', 'state', state)
				
				// console.groupCollapsed('%c%s', 'font-weight:bold;color:#4CAF50', 'state')
				// console.log('%c%s', 'font-weight:bold;color:#4CAF50', JSON.stringify(state, null, '\t'))
				// console.groupEnd()
			}
			console.groupEnd()
			
			return result
		}
	}
}