redux devtools extension
v2.17.1
extension.zip aus den letzten Versionen herunter, entpacken Sie es, öffnen Sie die URL chrome://extensions , aktivieren Sie den Entwicklermodus oben links und klicken Sie dann auf; auf Load Unpacked und wählen Sie den extrahierten Ordner zur Verwendung ausnpm i && npm run build:extension und laden Sie den Ordner der Erweiterung ./build/extension ;npm i && npm start und laden Sie den Ordner der Erweiterung ./dev .npm i && npm run build:firefox und laden Sie den Ordner der Erweiterung ./build/firefox (wählen Sie einfach eine Datei aus dem Verzeichnis aus).REDUX_DEVTOOLS im electron-devtools-installer an.remote-redux-devtools . Beachten Sie, dass
window.devToolsExtensionab Version 2.7 inwindow.__REDUX_DEVTOOLS_EXTENSION__/window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__umbenannt wurde.
Für einen einfachen Redux-Store fügen Sie einfach Folgendes hinzu:
const store = createStore(
reducer, /* preloadedState, */
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); Beachten Sie, dass das Argument preloadedState im createStore von Redux optional ist.
Stellen Sie bei universellen („isomorphen“) Apps den Eintrag
typeof window !== 'undefined' &&voran.
const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;Verwenden Sie für TypeScript das npm-Paket
redux-devtools-extension, das alle Definitionen enthält, oder verwenden Sie einfach(window as any)(ein Beispiel finden Sie unter Rezepte).
const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;Falls ESLint so konfiguriert ist, dass die Verwendung des Unterstrich-Dangles nicht zulässig ist, wickeln Sie es wie folgt ein:
+ /* eslint-disable no-underscore-dangle */
const store = createStore(
reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
+ /* eslint-enable */Hinweis : Die Übergabe von Enhancer als letztes Argument erfordert redux@>=3.1.0 . Für ältere Versionen wenden Sie es wie hier oder hier an. Mischen Sie nicht die alte Redux-API mit der neuen.
Sie müssen npm install
redux-devtoolsnicht verwenden, wenn Sie die Erweiterung verwenden (das ist eine andere Bibliothek).
Wenn Sie Ihren Shop mit Middleware und Enhancern einrichten, ändern Sie Folgendes:
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)
));Beachten Sie, dass wir hier Redux Compose verwenden, wenn die Erweiterung nicht installiert ist.
Um die Optionen der Erweiterung anzugeben, verwenden Sie sie wie folgt:
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 ) ;Weitere Informationen finden Sie im Beitrag.
redux-devtools-extension von npmZur Vereinfachung muss ein npm-Paket installiert werden:
npm install --save redux-devtools-extension
und so zu verwenden:
import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;
const store = createStore ( reducer , composeWithDevTools (
applyMiddleware ( ... middleware ) ,
// other store enhancers if any
) ) ;So geben Sie die Optionen der Erweiterung an:
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
) ) ;Ihrem Paket werden nur wenige Codezeilen hinzugefügt.
Falls Sie keine anderen Enhancer und Middlewares einbinden, verwenden Sie einfach 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
) ) ;Es ist sinnvoll, die Erweiterung auch in die Produktion einzubeziehen. Normalerweise können Sie es für die Entwicklung verwenden.
Wenn Sie es dort einschränken möchten, verwenden Sie 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
) ) ;oder mit Middleware und Enhancern:
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
) ) ;Sie müssen
'process.env.NODE_ENV': JSON.stringify('production')in Ihrer Webpack-Konfiguration für das Produktionspaket (zur Envifizierung) hinzufügen. Wenn Siecreate-react-appverwenden, erledigt es dies bereits für Sie.
Wenn Sie beim Erstellen des Stores bereits process.env.NODE_ENV überprüfen, schließen Sie redux-devtools-extension/logOnly für die Produktionsumgebung ein.
Wenn Sie die Erweiterung in der Produktion nicht zulassen möchten, verwenden Sie einfach redux-devtools-extension/developmentOnly .
Weitere Einzelheiten finden Sie im Artikel.
Für React Native können wir react-native-debugger verwenden, das bereits dieselbe API mit der Redux DevTools Extension enthielt.
Binden Sie für die meisten Plattformen den Store Enhancer von Remote Redux DevTools ein und wählen Sie im Kontextmenü der Erweiterung „Open Remote DevTools“ für die Fernüberwachung.
Weitere Informationen zur Verwendung der Erweiterung mit jeder Architektur finden Sie unter Integrationen und im Blogbeitrag.
Live-Demos zur Verwendung der Erweiterung mit:
Siehe auch den Ordner ./examples .
Unterstützen Sie uns mit einer monatlichen Spende und helfen Sie uns, unsere Aktivitäten fortzusetzen. [Unterstützer werden]
Werden Sie Sponsor und erhalten Sie Ihr Logo in unserer README-Datei auf Github mit einem Link zu Ihrer Website. [Sponsor werden]
MIT
Wenn Ihnen das gefällt, folgen Sie @mdiordiev auf Twitter.
