[Redux] Wrapping Dispatch () to Log Actions

We'll learn how centralized updates in Redux let us log every state change to the console along with the action that Cau Sed 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) {returnRawdispatch; }    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); returnreturnvalue; };}; Const Configurestore= () + ={Const Persistedstate=loadState (); Const Store=CreateStore (Todoapp, persistedstate); //If in production does not log it    if(Process.env.NODE_ENV!== ' production ') {Store.dispatch=Addloggingtodispatch (store); } store.subscribe (Throttle ()={saveState ({todos:store.getState (). Todos,}); }, 1000)); returnstore;}; ExportdefaultConfigurestore;

[Redux] Wrapping Dispatch () to Log Actions