與redux的Devtools模塊不同,該工具主要依賴瀏覽器插件完成。模式也比Devtools簡單點。
Chrome地址(360極速模式也可以用): https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
火狐地址: https://addons.mozilla.org/en-US/Firefox/addon/remotedev/
原來代碼:
const store = createStore( reducer /* PReloadedState, */ );修改為:
const store = createStore( reducer, /* preloadedState, */window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );那么如果你使用了Middleware,原代碼是
const store = createStore( reducer, /* preloadedState, */ applyMiddleware(thunk) );怎么辦?
這樣修改
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';const store = createStore( reducer, /* preloadedState, */compose(applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) ); 首先要導入compose,然后再使用compose將Middleware和插件調用組合起來參考原文鏈接: https://github.com/zalmoxisus/redux-devtools-extension?utm_source=tuicool&utm_medium=referral
另一種Devtools模塊方式介紹請移步下面文章: http://www.jianshu.com/p/a2d4c1856560
新聞熱點
疑難解答