Redux DevTools 扩展的使用说明

原文:Redux DevTools extension

ps : 如果这个项目没有处理好, 则会出现

there is a warning (“Unresolved variable REDUX_DEVTOOLS_EXTENSION and REDUX_DEVTOOLS_EXTENSION) in webstorm

类似这样的报错

安装

1. Chrome、Firefox

可以在浏览器网上商店中下载安装该扩展

2. 其它浏览器和非浏览器环境

用法

使用Redux

1). store普通用法 对于基础的redux store只加添加:

1
2
3
4
 const store = createStore(
reducer, /* preloadedState, */
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

注:preloadedStatecreateStore中是可选的

对于通用(“同构”)应用程序,请在其前面加上typeof window !== 'undefined' &&

出现ESLint报错时,可以如下配置:

1
2
3
4
5
6
+ /* eslint-disable no-underscore-dangle */
const store = createStore(
reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
+ /* eslint-enable */

支持redux>=3.1.0 版本

2). store高级用法 如果store使用了中间件 middleware 和增强器 enhaners,代码要修改下:

1
2
3
4
5
6
7
8
9
import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
reducer, /* preloadedState, */
composeEnhancers(
applyMiddleware(...middleware)
));

当有特殊扩展选项时,用这么使用:

1
2
3
4
5
6
7
8
9
10
11
const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// 有指定扩展选项,像name, actionsBlacklist, actionsCreators, serialize...
}) : compose;

const enhancer = composeEnhancers(
applyMiddleware(...middleware),
// 其他store增强器(如果有的话)
);

const store = createStore(reducer, enhancer);

3). 使用redux-devtools-extension包 为了简化操作需要安装个npm包 npm install --save-dev redux-devtools-extension 使用

1
2
3
4
5
6
7
8
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer,
composeWithDevTools(
applyMiddleware(...middleware),
// 其他store增强器(如果有的话)
));

指定扩展名选项:

1
2
3
4
5
6
7
8
9
10
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
// 如果需要,在这里指定名称,actionsBlacklist,actionsCreators和其他选项
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware),
// 其他store增强器(如果有的话)
));

如果你没有包含其它增强器和中间件的话,只需要使用devToolsEnhancer

1
2
3
4
5
6
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
// 需要的话,在这里指定名称,actionsBlacklist,actionsCreators和其他选项
));

4). 在生产环境中使用 这个扩展在生产环境也是有用的,但一般都是在开发环境中使用它。 如果你想限制它的使用,可以用 redux-devtools-extension/logOnlyInProduction

1
2
3
4
5
6
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
// actionSanitizer, stateSanitizer等选项
));

使用中间件和增强器时:

1
2
3
4
5
6
7
8
9
10
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

const composeEnhancers = composeWithDevTools({
// actionSanitizer, stateSanitizer选项
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware),
// 其它增强器
));

你将不得不在 webpack 的生产环境打包配置中加上process.env.NODE_ENV': JSON.stringify('production')。如果你用的是create-react-app,那么它已经帮你配置好了

如果你在创建store时检查过process.env.NODE_ENV,那么也包括了生产环境的redux-devtools-extension/logOnly 如果不想在生产环境使用扩展,那就只开启redux-devtools-extension/developmentOnly就好

点击文章查看更多细节

5). 对于react-nativehybriddesktop 和 服务端的redux应用程序

-
react-native 可以用和redux DevTools Extension一样api的react-native-debugger工具。

-
大多数平台,包括remote redux devtool's 的store增强器,可以通过扩展上下文的菜单中选择'open remote devtools' 来远程监控。

没有使用Redux

关于怎么使用体系结构的扩展,请参考以下集合链接博客文章

备注

2020-02-25 : 删除 2.7 之前的提示


语雀镜像 : Redux DevTools 扩展的使用说明 ,点此 提问

作者

Duoli

发布于

2021-06-26

更新于

2022-12-08

许可协议

评论