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?

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()

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

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

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.

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__

Die empfohlene Lösung funktioniert bei mir nicht.

Der richtige Befehl lautet:

$r.props.store.getState()

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)

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.

Mit React Developer Tools:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

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.