web-dev-qa-db-fra.com

Pendant le débogage, puis-je accéder au magasin Redux à partir de la console du navigateur?

J'ai des tests unitaires pour mon reducers, comme je suis supposé l'avoir. Cependant, lorsque je débogue dans le navigateur, je souhaite vérifier si mes actions ont été appelées correctement et si l'état a été modifié en conséquence.

Je cherche quelque chose comme:

window._redux.store

... dans le navigateur afin que je puisse taper cela sur la console et vérifier comment les choses se passent.

Comment puis-je y arriver?

javascriptreactjsredux
63
André Pena

Si vous avez des outils de développement en cours d’exécution, vous pouvez utiliser $r.store.getState(); avec aucune modification apportée à votre base de code.

Remarque: Vous devez d'abord ouvrir l'outil de développement react dans votre fenêtre d'outils de développement pour que cela fonctionne, sinon vous obtiendrez une erreur $r is not defined

  1. outils de développement ouverts
  2. cliquez sur l'onglet React
  3. s'assurer que le nœud fournisseur (ou le nœud le plus haut) est sélectionné
  4. puis tapez $r.store.getState(); ou $r.store.dispatch({type:"MY_ACTION"}) dans votre console
113
S.Kiers

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

Maintenant, vous pouvez accéder au magasin à partir de window.store dans la console comme ceci:

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

54
Adrian Silvescu

Vous pouvez utiliser un middleware de journalisation comme décrit dans le livre 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)

Alternativement, vous pouvez changer la journalisation pour juste ajouter à un tableau global (votre window._redux) et vous pouvez consulter le tableau lorsque vous avez besoin d’informations sur un état particulier.

11
Sean Vieira

Si vous utilisez Next JS , vous pouvez accéder au magasin par: window.__NEXT_REDUX_STORE__.getState()

Vous pouvez également envoyer des actions, il suffit de regarder les options que vous avez dans window.__NEXT_REDUX_STORE__

3
Satwik Gupta

Si vous souhaitez voir l'état du magasin pour le débogage, vous pouvez le faire:

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

Avec les outils de développement react:

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