使用Redux DevTools浏览器插件调试redux

2024-04-27 15:12:54

字体：大中小

来源：转载

供稿：网友

使用Redux DevTools浏览器插件调试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最后一个参数

原来代码：

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和插件调用组合起来

这里写图片描述