Redux DevTools 扩展的使用说明
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 | const store = createStore( |
注:preloadedState
在createStore
中是可选的
对于通用(“同构”)应用程序,请在其前面加上
typeof window !== 'undefined' &&
。
出现ESLint报错时,可以如下配置:
1 | + /* eslint-disable no-underscore-dangle */ |
支持redux>=3.1.0 版本
2). store高级用法 如果store使用了中间件 middleware
和增强器 enhaners
,代码要修改下:
1 | import { createStore, applyMiddleware, compose } from 'redux'; |
当有特殊扩展选项时,用这么使用:
1 | const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? |
3). 使用redux-devtools-extension
包 为了简化操作需要安装个npm包 npm install --save-dev redux-devtools-extension
使用
1 | import { createStore, applyMiddleware } from 'redux'; |
指定扩展名选项:
1 | import { createStore, applyMiddleware } from 'redux'; |
如果你没有包含其它增强器和中间件的话,只需要使用devToolsEnhancer
1 | import { createStore } from 'redux'; |
4). 在生产环境中使用 这个扩展在生产环境也是有用的,但一般都是在开发环境中使用它。 如果你想限制它的使用,可以用 redux-devtools-extension/logOnlyInProduction
:
1 | import { createStore } from 'redux'; |
使用中间件和增强器时:
1 | import { createStore, applyMiddleware } from 'redux'; |
你将不得不在 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-native
, hybrid
, desktop
和 服务端的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 扩展的使用说明 ,点此 提问
Redux DevTools 扩展的使用说明
https://wulicode.com/web/redux-devtools-kuo-zhan-de-shi-yong-shuo-ming.html