Ho unit test per il mio file reducers. Tuttavia, quando eseguo il debug nel browser, voglio controllare se le mie azioni sono state chiamate correttamente e se lo stato è stato modificato di conseguenza.

Sto cercando qualcosa come:

window._redux.store

... nel browser in modo da poterlo digitare sulla console e controllare come stanno andando le cose.

Come posso ottenerlo?

Come visualizzare Redux Store su qualsiasi sito Web, senza modifiche al codice

Aggiornamento novembre 2019

Gli strumenti per la reazione sono cambiati rispetto alla mia risposta originale. La nuova componentsscheda in devtools di Chrome contiene ancora i dati, ma potresti dover cercare un po 'di più.

1. apri chrome devTools
2. selezionare la Componentsscheda di react devtool
3. fare clic sul nodo più in alto e cercare nella colonna di destra per storeessere mostrato
4. ripeti il ​​passaggio 3 giù per l'albero finché non trovi il store(per me era il 4 ° livello)
5. Ora puoi seguire i passaggi seguenti con $r.store.getState()

Risposta originale

Se si dispone di reagire strumenti di sviluppo in esecuzione è possibile utilizzare $r.store.getState();con i senza modifiche al codice di base .

Nota: devi prima aprire il react devtool nella finestra degli strumenti per sviluppatori per farlo funzionare, altrimenti otterrai un $r is not definederrore

1. strumenti per sviluppatori aperti
2. fare clic sulla scheda React
3. assicurarsi che il nodo del provider (o il nodo più in alto) sia selezionato
4. quindi digita $r.store.getState();o $r.store.dispatch({type:"MY_ACTION"})nella tua console

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

Ora puoi accedere al negozio da window.store nella console in questo modo:

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

È possibile utilizzare un middleware di registrazione come descritto nel libro Redux :

/**
 * 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)

In alternativa, è possibile modificare la registrazione per aggiungerla a un array globale (il proprio window._redux) e cercare nell'array quando sono necessarie informazioni su un particolare stato.

La soluzione consigliata non funziona per me.

Il comando corretto è:

$r.props.store.getState()

Se stai usando Next JS , puoi accedere al negozio: window.__NEXT_REDUX_STORE__.getState()

Puoi anche inviare azioni, guarda le opzioni che hai inwindow.__NEXT_REDUX_STORE__

Nel caso in cui desideri vedere lo stato dell'archivio per il debug, puoi farlo:

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

Un'altra risposta suggerisce di aggiungere il negozio alla finestra, ma se vuoi solo accedere al negozio come un oggetto, puoi definire un getter sulla finestra.

Questo codice deve essere aggiunto dove hai configurato il tuo negozio: nella mia app, questo è lo stesso file in cui <Provider store={store} />viene chiamato.

Ora puoi digitare reduxStorenella console per ottenere un oggetto e copy(reduxStore)copiarlo negli appunti.

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

Puoi racchiuderlo in un if (process.env.NODE_ENV === 'development')per disabilitarlo in produzione.

Con gli strumenti per sviluppatori React:

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

Prima di tutto, devi definire il negozio windownell'oggetto (puoi inserirlo nel tuo configureStorefile):

window.store = store;

Quindi devi solo scrivere nella console quanto segue:

window.store.getState();

Hop questo aiuta.