使用Redux DevTools瀏覽器插件調(diào)試redux

2024-04-27 15:12:54

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

使用Redux DevTools瀏覽器插件調(diào)試redux

與redux的Devtools模塊不同，該工具主要依賴瀏覽器插件完成。模式也比Devtools簡單點。

step1 下載插件

Chrome地址（360極速模式也可以用）： https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

火狐地址： https://addons.mozilla.org/en-US/Firefox/addon/remotedev/

step2 添加createstore最后一個參數(shù)

原來代碼：

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__()) ); 首先要導(dǎo)入compose，然后再使用compose將Middleware和插件調(diào)用組合起來

這里寫圖片描述