Во время отладки, могу ли я получить доступ к хранилищу Redux с консоли браузера?

У меня есть модульные тесты для моего reducers, как я и предполагал. Однако, когда я отлаживаю браузер, я хочу проверить, правильно ли были вызваны мои действия и было ли соответствующее изменение соответствующим образом.

Я ищу что-то вроде:

window._redux.store

... в браузере, чтобы я мог набрать его на консоли и проверить, как все происходит.

Как я могу это достичь?

Ответы

Ответ 1

Если у вас есть запущенные инструменты для разработчиков, вы можете использовать $r.store.getState(); без изменений в вашей кодовой базе.

Примечание. Сначала вы должны открыть реагирующий инструмент в окне инструментов разработчика, чтобы это сработало, в противном случае вы получите сообщение об ошибке $r is not defined

  1. открытые инструменты разработчика
  2. нажмите вкладку Реагировать
  3. убедитесь, что выбран узел провайдера (или самый верхний узел)
  4. затем введите $r.store.getState(); или $r.store.dispatch({type:"MY_ACTION"}) в вашей консоли

Ответ 2

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

Теперь вы можете получить доступ к хранилищу из window.store в консоли, как это:

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

Ответ 3

Вы можете использовать промежуточное программное обеспечение для ведения журнала как описано в книге 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)

В качестве альтернативы вы можете изменить ведение журнала только для добавления в глобальный массив (ваш window._redux), и вы можете посмотреть в массиве, когда вам нужна информация о конкретном состоянии.

Ответ 4

Если вы используете Next JS, вы можете получить доступ к магазину: window.__NEXT_REDUX_STORE__.getState()

Вы также можете отправлять действия, просто посмотрите на опции, которые у вас есть в window.__NEXT_REDUX_STORE__

Ответ 5

Если вы хотите посмотреть состояние хранилища для отладки, вы можете сделать это:

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

Ответ 6

С помощью инструментов для разработчиков:

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

Ответ 7

Прежде всего, вам нужно определить хранилище в объекте window (вы можете поместить его в свой файл configureStore):

window.store = store;

Тогда вам нужно всего лишь написать в консоли следующее:

window.store.getState();

Хоп это помогает.