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

Je recherche quelque chose comme:

window._redux.store

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

Comment puis-je y parvenir?

Comment afficher le magasin Redux sur n'importe quel site Web, sans changement de code

Mise à jour novembre 2019

Les devtools de react ont changé depuis ma réponse initiale. Le nouvel componentsonglet dans les outils de développement de Chrome contient toujours les données, mais vous devrez peut-être chercher un peu plus.

1. ouvrir chrome devTools
2. sélectionnez l' Componentsonglet React devtool
3. cliquez sur le nœud le plus haut et regardez dans la colonne de droite pour storeêtre affiché
4. répétez l'étape 3 dans l'arbre jusqu'à ce que vous trouviez le store(pour moi c'était le 4ème niveau)
5. Vous pouvez maintenant suivre les étapes ci-dessous avec $r.store.getState()

Réponse originale

Si vous avez réagir les outils de développement en cours d' exécution , vous pouvez utiliser $r.store.getState();avec aucun changement à votre base de code .

Remarque: vous devez d'abord ouvrir le react devtool dans la fenêtre de vos outils de développement pour que cela fonctionne, sinon vous obtiendrez une $r is not definederreur

1. ouvrir les outils de développement
2. cliquez sur l'onglet Réagir
3. assurez-vous que le nœud fournisseur (ou le nœud le plus élevé) est sélectionné
4. puis tapez $r.store.getState();ou $r.store.dispatch({type:"MY_ACTION"})dans votre console

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

Vous pouvez maintenant accéder au magasin depuis window.store dans la console comme ceci:

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

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

Alternativement, vous pouvez modifier la journalisation pour l'ajouter simplement à un tableau global (votre window._redux) et vous pouvez regarder dans le tableau lorsque vous avez besoin d'informations sur un état particulier.

La solution recommandée ne fonctionne pas pour moi.

La commande correcte est:

$r.props.store.getState()

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

Vous pouvez également distribuer des actions, il suffit de regarder les options dont vous disposezwindow.__NEXT_REDUX_STORE__

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)

Une autre réponse suggère d'ajouter le magasin à la fenêtre, mais si vous voulez simplement accéder au magasin en tant qu'objet, vous pouvez définir un getter sur la fenêtre.

Ce code doit être ajouté là où vous avez configuré votre boutique - dans mon application, il s'agit du même fichier que celui où <Provider store={store} />est appelé.

Vous pouvez maintenant taper reduxStoredans la console pour obtenir un objet et copy(reduxStore)le copier dans le presse-papiers.

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

Vous pouvez encapsuler ceci dans un if (process.env.NODE_ENV === 'development')pour le désactiver en production.

Avec les outils de développement React:

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

Tout d'abord, vous devez définir le magasin dans l' windowobjet (vous pouvez le placer dans votre configureStorefichier):

window.store = store;

Ensuite, il vous suffit d'écrire dans la console ce qui suit:

window.store.getState();

J'espère que cela aide.