ReduxDevtool

效果

reduxdevtool

其实配合上热加载,能比较方便的看到redux的store的状态变化,还是不错的

实现方案

  1. 可以在component里放一个devtools组件,显示在页面的右边
  2. 安装chrome插件

how

这里说的是安装chrome插件的情况下如何使用

  1. 安装插件: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
  2. 可以先过一下插件文档和demo: https://github.com/zalmoxisus/redux-devtools-extension
  3. 改变store状态

    1. 从redux中获取compose
    2. 设置redux插入变量const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    3. 然后把之前的异步放进去state

      exports.configure_index_store = function(initial_state) {
          return createStore(index,initial_state,composeEnhancers((
          applyMiddleware(thunk)
        )))
      }
      
  4. 我原本设置store的文件

    import { createStore , applyMiddleware, compose } from 'redux'
    import thunk from 'redux-thunk'
    import { index } from '../Reducers/index'
    
    exports.configure_index_store = function(initial_state) {
     return createStore(index,initial_state,applyMiddleware(thunk)
    )))
    }
    

    改成支持插件获取store后的设置

    import { createStore , applyMiddleware, compose } from 'redux'
    import thunk from 'redux-thunk'
    import { index } from '../Reducers/index'
    
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    
    exports.configure_index_store = function(initial_state) {
     return createStore(index,initial_state,composeEnhancers((
     applyMiddleware(thunk)
    )))
    }
    
© 404mzk all right reserved,powered by Gitbookhttp://blog.404mzk.com 该文件修订时间: 2016-12-12 22:55:35

results matching ""

    No results matching ""