extension.zip
,解壓縮,開啟chrome://extensions
url並從左上角開啟開發者模式,然後按一下; Load Unpacked
並選擇要使用的解壓縮資料夾npm i && npm run build:extension
它並載入擴充的資料夾./build/extension
;npm i && npm start
在開發模式下運行它並加載擴展的資料夾./dev
。npm i && npm run build:firefox
建立它並載入擴充功能的資料夾./build/firefox
(只需從目錄中選擇一個檔案)。electron-devtools-installer
中指定REDUX_DEVTOOLS
即可。remote-redux-devtools
。 請注意,從 v2.7 開始,
window.devToolsExtension
已重新命名為window.__REDUX_DEVTOOLS_EXTENSION__
/window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
。
對於基本的 Redux 存儲,只需添加:
const store = createStore(
reducer, /* preloadedState, */
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
請注意, preloadedState
參數在 Redux 的createStore
中是可選的。
對於通用(「同構」)應用程序,請在其前面加上
typeof window !== 'undefined' &&
。
const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;
對於 TypeScript,請使用
redux-devtools-extension
npm 套件,其中包含所有定義,或僅使用(window as any)
(有關範例,請參閱食譜)。
const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;
如果 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 。對於舊版本,請像此處或此處一樣應用它。不要將舊的 Redux API 與新的 API 混合在一起。
使用擴充功能時,您不需要 npm install
redux-devtools
(這是一個不同的函式庫)。
如果您使用中間件和增強器設定商店,請變更:
import { createStore, applyMiddleware, compose } from 'redux';
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware)
));
請注意,當未安裝擴充功能時,我們在此處使用 Redux compose。
若要指定擴充功能的選項,請像這樣使用它:
const composeEnhancers =
typeof window === 'object' &&
window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ( {
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
} ) : compose ;
const enhancer = composeEnhancers (
applyMiddleware ( ... middleware ) ,
// other store enhancers if any
) ;
const store = createStore ( reducer , enhancer ) ;
請參閱帖子以了解更多詳細資訊。
redux-devtools-extension
套件為了讓事情變得更容易,需要安裝一個 npm 套件:
npm install --save redux-devtools-extension
並且像這樣使用:
import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;
const store = createStore ( reducer , composeWithDevTools (
applyMiddleware ( ... middleware ) ,
// other store enhancers if any
) ) ;
若要指定擴充功能的選項:
import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;
const composeEnhancers = composeWithDevTools ( {
// Specify name here, actionsBlacklist, actionsCreators and other options if needed
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
applyMiddleware ( ... middleware ) ,
// other store enhancers if any
) ) ;
只需添加幾行程式碼到您的包中即可。
如果您不包含其他增強器和中間件,只需使用devToolsEnhancer
:
import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension' ;
const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
// Specify name here, actionsBlacklist, actionsCreators and other options if needed
) ) ;
將擴展包含在生產中也很有用。通常你可以用它來進行開發。
如果你想限制它,請使用redux-devtools-extension/logOnlyInProduction
:
import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction' ;
const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
// options like actionSanitizer, stateSanitizer
) ) ;
或使用中介軟體和增強器:
import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction' ;
const composeEnhancers = composeWithDevTools ( {
// options like actionSanitizer, stateSanitizer
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
applyMiddleware ( ... middleware ) ,
// other store enhancers if any
) ) ;
您必須在生產包的 Webpack 設定中新增
'process.env.NODE_ENV': JSON.stringify('production')
(以 envify)。如果您使用create-react-app
,它已經為您完成了。
如果您在建立儲存體時已經檢查了process.env.NODE_ENV
,請在生產環境中包含redux-devtools-extension/logOnly
。
如果您不想在生產中允許擴展,只需使用redux-devtools-extension/developmentOnly
。
請參閱文章以了解更多詳細資訊。
對於React Native,我們可以使用react-native-debugger
,它已經包含了與Redux DevTools Extension相同的API。
對於大多數平台,包括Remote Redux DevTools
的儲存增強器,並從擴展的上下文選單中選擇「開啟 Remote DevTools」以進行遠端監控。
有關如何在任何架構中使用擴展的更多詳細信息,請參閱集成和部落格文章。
使用該擴展的現場演示:
另請參閱./examples
資料夾。
每月捐款支持我們,並幫助我們繼續我們的活動。 [成為支持者]
成為贊助商並在 Github 上的自述文件中獲取您的徽標以及指向您網站的連結。 [成為贊助商]
麻省理工學院
如果你喜歡這個,請在 Twitter 上關注@mdiordiev。