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;

  • 相关阅读:
    类似最长递增子序,记忆化DP—— Codeforces Beta Round #4 (Div. 2 Only)D Mysterious Present
    最小逆序数对——hdu1394
    区间更新 求总区间——hdu1754
    抽象类 虚函数实现
    poj2271
    poj2246
    poj2410
    poj2567
    poj2247
    Integration Services 学习(7):包部署 (转自游子吟)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5565718.html
Copyright © 2011-2022 走看看