Tengo pruebas unitarias para mi reducers. Sin embargo, cuando estoy depurando en el navegador, quiero comprobar si mis acciones se han llamado correctamente y si el estado se ha modificado en consecuencia.

Estoy buscando algo como:

window._redux.store

... en el navegador para poder escribir eso en la consola y comprobar cómo van las cosas.

¿Cómo puedo lograrlo?

Cómo ver la tienda redux en cualquier sitio web, sin cambios de código

Actualización Nov 2019

Las devtools de reacción han cambiado desde mi respuesta original. La nueva componentspestaña en las herramientas de desarrollo de Chrome todavía tiene los datos, pero es posible que tenga que buscar un poco más.

1. abrir Chrome devTools
2. seleccione reaccionar de devtool Componentspestaña
3. haga clic en el nodo superior y busque en la columna de la derecha para storeque se muestre
4. repite el paso 3 abajo del árbol hasta que encuentres el store(para mí fue el 4to nivel)
5. Ahora puede seguir los pasos a continuación con $r.store.getState()

Respuesta original

Si usted tiene las herramientas para desarrolladores reaccionar correr puede utilizar $r.store.getState();con ningún cambio en el código base .

Nota: Primero debe abrir la herramienta de reacción de desarrollo en la ventana de herramientas de desarrollador para que esto funcione, de lo contrario, obtendrá un $r is not definederror

1. herramientas de desarrollador abiertas
2. haga clic en la pestaña Reaccionar
3. asegúrese de que el nodo proveedor (o nodo superior) esté seleccionado
4. luego escribe $r.store.getState();o $r.store.dispatch({type:"MY_ACTION"})en tu consola

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

Ahora puede acceder a la tienda desde window.store en la consola de esta manera:

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

Puede utilizar un middleware de registro como se describe en el 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)

Alternativamente, puede cambiar el registro para agregarlo a una matriz global (su window._redux) y puede buscar en la matriz cuando necesite información sobre un estado en particular.

La solución recomendada no me funciona.

El comando correcto es:

$r.props.store.getState()

Si está utilizando Next JS , puede acceder a la tienda mediante: window.__NEXT_REDUX_STORE__.getState()

También puede enviar acciones, solo mire las opciones que tiene enwindow.__NEXT_REDUX_STORE__

En caso de que desee ver el estado de la tienda para la depuración, puede hacer esto:

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

Otra respuesta sugiere agregar la tienda a la ventana, pero si solo desea acceder a la tienda como un objeto, puede definir un captador en la ventana.

Este código debe agregarse donde haya configurado su tienda; en mi aplicación, este es el mismo archivo donde <Provider store={store} />se llama.

Ahora puede escribir reduxStoreen la consola para obtener un objeto y copy(reduxStore)copiarlo en el portapapeles.

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

Puede envolver esto en un if (process.env.NODE_ENV === 'development')para deshabilitarlo en producción.

Con las herramientas de desarrollo de react:

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

En primer lugar, debe definir la tienda en el windowobjeto (puede colocarlo en su configureStorearchivo):

window.store = store;

Entonces solo necesitas escribir en la consola lo siguiente:

window.store.getState();

Hop esto ayuda.