[Redux] Wrapping dispatch() to Log Actions

We will learn how centralized updates in Redux let us log every state change to the console along with the action that caused it.

import { createStore } from 'redux';
import throttle from 'lodash/throttle';
import todoApp from './reducers';
import { loadState, saveState } from './localStorge';

const addLoggingToDispatch = (store) => {

const rawDispatch = store.dispatch;

// If browser not support console.group
if (!console.group) {
return rawDispatch;
}

return (action) => {
console.group(action.type);
console.log('%c prev state', 'color: gray', store.getState());
console.log('%c action', 'color: blue', action);
const returnValue = rawDispatch(action);
console.log('%c next state', 'color: green', store.getState());
console.groupEnd(action.type);
return returnValue;
};
};

const configureStore = () => {
const persistedState = loadState();
const store = createStore(todoApp, persistedState);

// If in production do not log it
if (process.env.NODE_ENV !== 'production') {
store.dispatch = addLoggingToDispatch(store);
}

store.subscribe(throttle(() => {
saveState({
todos: store.getState().todos,
});
}, 1000));

return store;
};

export default configureStore;