Redux DevTools 擴展的使用說明

時間 2019-11-08

標籤 redux devtools 擴展使用說明简体版

原文原文鏈接

原文：github.com/zalmoxisus/…react

安裝

1. Chrome、Firefox

能夠在瀏覽器網上商店中下載安裝該擴展

2. 其它瀏覽器和非瀏覽器環境

使用remote-redux-devtools

用法

注意，從2.7開始，window.devToolsExtension重命名爲window.__REDUX_DEVTOOLS_EXTENSION__/ window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.webpack

使用Redux

store普通用法對於基礎的redux store只加添加：git

const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
複製代碼

注：preloadedState在createStore中是可選的github

對於通用（「同構」）應用程序，請在其前面加上typeof window !== 'undefined' &&。web

出現ESLint報錯時，能夠以下配置：npm

+ /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */
複製代碼

支持redux>=3.1.0 版本redux

store高級用法若是store使用了中間件middleware和加強器enhaners，代碼要修改下：react-native

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

當有特殊擴展選項時，用這麼使用：api

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);
複製代碼

使用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和其餘選項
));
複製代碼

在生產環境中使用這個擴展在生產環境也是有用的，但通常都是在開發環境中使用它。若是你想限制它的使用，能夠用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就好

點擊文章查看更多細節
對於react-native, hybrid, desktop 和服務端的redux應用程序
- react-native 能夠用和redux DevTools Extension同樣api的react-native-debugger工具。
- 大多數平臺，包括remote redux devtool's 的store加強器，能夠經過擴展上下文的菜單中選擇'open remote devtools' 來遠程監控。