zoukankan      html  css  js  c++  java
  • [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;

  • 相关阅读:
    Tomcat Connector的三种运行模式
    Tomcat管理页面配置
    URI、URL、URN
    利用libcurl进行post
    安装WIA组件
    wget访问SOAP接口
    haproxy+tomcat集群搭建
    Redis主从复制及状态监测
    VB6之Mandelbrot集
    leetcode Word Search
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5565718.html
Copyright © 2011-2022 走看看