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

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

window._redux.store

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

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

Как просмотреть магазин redux на любом веб-сайте без изменения кода

Обновление ноябрь 2019

Инструменты разработки реакции изменились с момента моего первоначального ответа. На новой componentsвкладке в chrome devtools все еще есть данные, но вам, возможно, придется поискать немного больше.

1. открыть chrome devTools
2. выберите Componentsвкладку React Devtool
3. нажмите на самый верхний узел и посмотрите в правом столбце, storeчтобы он отобразился
4. повторите шаг 3 вниз по дереву, пока не найдете store(для меня это был 4-й уровень)
5. Теперь вы можете выполнить следующие шаги с помощью $r.store.getState()

Оригинальный ответ

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

Примечание: вы должны сначала открыть react devtool в окне инструментов разработчика, чтобы все заработало, иначе вы получите сообщение $r is not definedоб ошибке.

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

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

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

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

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

Рекомендуемое решение у меня не работает.

Правильная команда:

$r.props.store.getState()

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

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

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

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

Другой ответ предлагает добавить хранилище в окно, но если вам просто нужен доступ к хранилищу как к объекту, вы можете определить геттер в окне.

Этот код нужно добавить туда, где вы настроили свой магазин - в моем приложении это тот же файл, что и where <Provider store={store} />.

Теперь вы можете ввести reduxStoreв консоль, чтобы получить объект - и copy(reduxStore)скопировать его в буфер обмена.

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

Вы можете обернуть это, if (process.env.NODE_ENV === 'development')чтобы отключить в производстве.

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

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

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

window.store = store;

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

window.store.getState();

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