Kann ich beim Debugging über die Browserkonsole auf den Redux-Speicher zugreifen?

Question

Ich habe Komponententests für meine reducers, wie ich so habe. Beim Debuggen im Browser möchte ich jedoch prüfen, ob meine Aktionen korrekt aufgerufen wurden und ob der Status entsprechend geändert wurde.

Ich bin auf der Suche nach so etwas wie:

window._redux.store 

... im Browser so, dass ich auf der Konsole eingeben kann und prüfen, wie die Dinge laufen.

Wie kann ich das erreichen?

Answer 1

Sie können eine Logging-Middleware verwenden as described in the Redux Book:

/** 
* 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önnten Sie die Protokollierung ändern, um nur zu einem globalen Array anhängen (Ihre window._redux) und Sie in dem Array aussehen könnte, wenn Sie Informationen über eine notwendige bestimmter Staat.

Answer 2

let store = createStore(yourApp); window.store = store;

Jetzt können Sie den Laden von window.store in der Konsole wie folgt zugreifen:

window.store.dispatch({type:"MY_ACTION"})

Answer 3

Wenn Sie Entwickler-Tools reagieren müssen laufen Sie $r.store.getState(); mit keine Änderungen verwenden können Ihre Codebasis.

Hinweis: Sie müssen die DevTool in Ihrem Entwickler-Tools Fenster reagieren öffnen Sie zunächst diese Arbeit zu machen, sonst werden Sie ein $r is not defined Fehler

1. offene Entwickler-Tools erhalten
2. die Registerkarte Reagieren klicken
3. den Provider-Knoten sicherstellen (oder obersten Knoten) wird
4. dann $r.store.getState();
in der Konsole eingeben ausgewählt

Answer 4

Falls Sie gerne für den Shop-Zustand sehen Debuggen Sie dies tun könnte:

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