Ich habe Unit-Tests für meine reducers
. Beim Debuggen im Browser möchte ich jedoch überprüfen, ob meine Aktionen korrekt aufgerufen wurden und ob der Status entsprechend geändert wurde.
Ich suche so etwas wie:
window._redux.store
... im Browser, damit ich das auf der Konsole eingeben und überprüfen kann, wie es läuft.
Wie kann ich das erreichen?
javascript
reactjs
redux
André Pena
quelle
quelle
LogMonitor
, um Ihre Aktionen und die daraus resultierenden Zustände zu visualisieren.Antworten:
So zeigen Sie den Redux Store auf einer beliebigen Website ohne Codeänderungen an
Update November 2019
Die React Devtools haben sich seit meiner ursprünglichen Antwort geändert. Die neue
components
Registerkarte in den Devtools von Chrome enthält noch die Daten, aber Sie müssen möglicherweise etwas mehr suchen.Components
Registerkarte React Devtoolstore
nach einer Anzeigestore
(für mich war es die 4. Stufe)$r.store.getState()
Ursprüngliche Antwort
Wenn Sie reagieren Entwickler - Tools laufen haben Sie verwenden können ,
$r.store.getState();
mit keinen Änderungen an der Code - Basis .Hinweis: Sie müssen zuerst das React Devtool in Ihrem Entwickler-Tool-Fenster öffnen, damit dies funktioniert. Andernfalls wird eine
$r is not defined
Fehlermeldung angezeigt$r.store.getState();
oder$r.store.dispatch({type:"MY_ACTION"})
in Ihre Konsole einquelle
state
als Eigenschaft in Ihrer Stammkomponente speichern . Wenn Sie den Anweisungen folgen und die<Provider>
Komponente als oberste Ebene verwenden, funktioniert dies einwandfrei. Ich bin gerade dabei, es zu bewegen!$r.state.store.getState()
$r
bezieht sich auf die aktuell ausgewählte Komponente imComponents
Abschnitt von Dev Tools. Ich scheine nicht die gesamten zugreifen zu können ,store
durch$r
, vielleicht , weil ich Haken überall bin mit, aber ich habe den Teil des Ladens zu sehen , dass meine Komponente sehen, die fast so gut ist, und manchmal mehr auf die Punkt!$r.hooks[0].subHooks[0].subHooks[0].value.store.getState()
funktioniert für jene Komponenten, dieuseSelector
... Ob., YMMV abhängig von den verwendeten Haken ...$r.props.store
let store = createStore(yourApp); window.store = store;
Jetzt können Sie über window.store in der Konsole wie folgt auf den Store zugreifen:
window.store.dispatch({type:"MY_ACTION"})
quelle
window.store.getState()
Sie können eine Protokollierungs-Middleware verwenden, wie im Redux-Buch beschrieben :
Alternativ können Sie die Protokollierung so ändern, dass sie nur an ein globales Array (Ihr
window._redux
) angehängt wird, und Sie können im Array nachsehen, wenn Sie Informationen zu einem bestimmten Status benötigen.quelle
Wenn Sie Next JS verwenden , können Sie auf das Geschäft zugreifen, indem Sie:
window.__NEXT_REDUX_STORE__.getState()
Sie können auch Aktionen auslösen. Schauen Sie sich einfach die Optionen an, die Sie in haben
window.__NEXT_REDUX_STORE__
quelle
Die empfohlene Lösung funktioniert bei mir nicht.
Der richtige Befehl lautet:
quelle
Wenn Sie den Speicherstatus zum Debuggen anzeigen möchten, können Sie Folgendes tun:
quelle
Eine andere Antwort schlägt vor, den Speicher zum Fenster hinzuzufügen. Wenn Sie jedoch nur als Objekt auf den Speicher zugreifen möchten, können Sie einen Getter im Fenster definieren.
Dieser Code muss dort hinzugefügt werden, wo Sie Ihren Shop konfiguriert haben. In meiner App ist dies dieselbe Datei wie dort, wo sie
<Provider store={store} />
aufgerufen wird.Jetzt können Sie
reduxStore
die Konsole eingeben, um ein Objekt abzurufen undcopy(reduxStore)
in die Zwischenablage zu kopieren.Sie können dies in ein verpacken
if (process.env.NODE_ENV === 'development')
, um es in der Produktion zu deaktivieren.quelle
Mit React Developer Tools:
quelle
Uncaught TypeError: Cannot read property 'values' of undefined
FehlerZunächst müssen Sie den Speicher im
window
Objekt definieren (Sie können ihn in IhreconfigureStore
Datei einfügen):Dann müssen Sie nur noch Folgendes in die Konsole schreiben:
Hop das hilft.
quelle