阅读 139

[译/React]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只加添加:

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
复制代码

注:preloadedStatecreateStore中是可选的

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

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

+ /* 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,代码要修改下:

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

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

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 使用

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

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

指定扩展名选项:

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

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

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

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

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

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

使用中间件和增强器时:

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 之前的提示

文章分类
前端
文章标签