Kann ich während des Debuggens über die Browserkonsole auf den Redux-Store zugreifen?

87

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?

André Pena
quelle
1
Als Randnotiz können Sie die Redux Devtools zusammen mit dem verwendenLogMonitor , um Ihre Aktionen und die daraus resultierenden Zustände zu visualisieren.
Michelle Tilley
1
Apropos Sicherheit: Ist es im Produktionserstellungsmodus möglich, den Speicher von der Browserkonsole zu lesen?
JRichardsz

Antworten:

148

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 componentsRegisterkarte in den Devtools von Chrome enthält noch die Daten, aber Sie müssen möglicherweise etwas mehr suchen.

  1. Öffnen Sie Chrome DevTools
  2. Wählen Sie die ComponentsRegisterkarte React Devtool
  3. Klicken Sie auf den obersten Knoten und suchen Sie in der rechten Spalte storenach einer Anzeige
  4. Wiederholen Sie Schritt 3 den Baum hinunter, bis Sie das finden store(für mich war es die 4. Stufe)
  5. Jetzt können Sie die folgenden Schritte mit ausführen $r.store.getState()

Beispiel-Screenshot

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 definedFehlermeldung angezeigt

  1. Entwickler-Tools öffnen
  2. Klicken Sie auf die Registerkarte Reagieren
  3. Stellen Sie sicher, dass der Anbieterknoten (oder der oberste Knoten) ausgewählt ist
  4. Geben Sie dann $r.store.getState();oder $r.store.dispatch({type:"MY_ACTION"})in Ihre Konsole ein
S.Kiers
quelle
2
Hinweis: Damit dies funktioniert, müssen Sie das stateals 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!
Aidan Feldman
3
Versuchen Sie$r.state.store.getState()
user1032752
4
Sieht aus wie $rbezieht sich auf die aktuell ausgewählte Komponente im ComponentsAbschnitt von Dev Tools. Ich scheine nicht die gesamten zugreifen zu können , storedurch $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!
Dima Tisnek
2
$r.hooks[0].subHooks[0].subHooks[0].value.store.getState()funktioniert für jene Komponenten, die useSelector... Ob., YMMV abhängig von den verwendeten Haken ...
Dima Tisnek
3
Ich musste$r.props.store
Kris Dover
62

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"})

Adrian Silvescu
quelle
6
und kann auch auf den Staat zugreifen:window.store.getState()
Liran Brimer
13

Sie können eine Protokollierungs-Middleware verwenden, wie im Redux-Buch beschrieben :

/**
 * Logs all actions and states after they are dispatched.
 */
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)

let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)

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.

Sean Vieira
quelle
1
Oder noch besser, verwenden Sie eine Bibliothek wie Redux-Logger
Anand Sainath
Wenn Sie die Reduzierungen wie folgt importieren: Reduzieren Sie Reduzierungen aus './reducers/', dann können Sie einfach let store = createStoreWithMiddleware (Reduzierungen) verwenden, da die Datei './reducers/' normalerweise CombineReducers enthält.
Bruce Seymour
6

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 habenwindow.__NEXT_REDUX_STORE__

Satwik Gupta
quelle
5

Die empfohlene Lösung funktioniert bei mir nicht.

Der richtige Befehl lautet:

$r.props.store.getState()
thodwris
quelle
Es sollte ein Kommentar zu dieser Antwort sein
gdbdable
1

Wenn Sie den Speicherstatus zum Debuggen anzeigen möchten, können Sie Folgendes tun:

#import global from 'window-or-global'
const store = createStore(reducer)
const onStateChange = (function (global) {
  global._state = this.getState()
}.bind(store, global))
store.subscribe(onStateChange)
onStateChange()
console.info('Application state is available via global _state object.', '_state=', global._state)
igor
quelle
0

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 reduxStoredie Konsole eingeben, um ein Objekt abzurufen und copy(reduxStore)in die Zwischenablage zu kopieren.

  Object.defineProperty(window, 'reduxStore', {
    get() {
      return store.getState();
    },
  });

Sie können dies in ein verpacken if (process.env.NODE_ENV === 'development'), um es in der Produktion zu deaktivieren.

James Wilson
quelle
-1

Mit React Developer Tools:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store
VARP-DOH
quelle
1
gibt Uncaught TypeError: Cannot read property 'values' of undefinedFehler
gdbdable
-2

Zunächst müssen Sie den Speicher im windowObjekt definieren (Sie können ihn in Ihre configureStoreDatei einfügen):

window.store = store;

Dann müssen Sie nur noch Folgendes in die Konsole schreiben:

window.store.getState();

Hop das hilft.

Alberto Perez
quelle
Der Speicher ist in der Konsole standardmäßig undefiniert. Wie kommt es dorthin?
Jen S.
Der Speicher muss zuerst im Fensterobjekt definiert werden, bevor er verwendet werden kann.
Rafael Rozon
@ RafaelRozon Ja, du hast recht, ich habe meine Antwort bearbeitet, um das zu zeigen.
Alberto Perez