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

Я шукаю щось на зразок:

window._redux.store

... у браузері, щоб я міг набрати це на консолі і перевірити, як ідуть справи.

Як я можу цього досягти?

Як переглянути магазин Redux на будь-якому веб-сайті, без змін коду

Оновлення листопада 2019

Інструменти реагування змінилися з моєї початкової відповіді. На новій componentsвкладці в розробницьких інструментах chrome все ще є дані, але можливо вам доведеться пошукати трохи більше.

1. відкрити chrome devTools
2. виберіть Componentsвкладку reag 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 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)

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

Якщо ви використовуєте Next JS , ви можете отримати доступ до магазину за допомогою: window.__NEXT_REDUX_STORE__.getState()

Ви також можете відправляти дії, просто подивіться на параметри, які ви маєте вwindow.__NEXT_REDUX_STORE__

Рекомендоване рішення для мене не працює.

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

$r.props.store.getState()

Якщо ви хочете побачити стан магазину для налагодження, ви можете зробити це:

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

Інша відповідь пропонує додавання магазину до вікна, але якщо ви просто хочете отримати доступ до магазину як об’єкта, ви можете визначити геттер у вікні.

Цей код потрібно додати там, де ви налаштували свій магазин - у моєму додатку це той самий файл, що і там, де <Provider store={store} />називається.

Тепер ви можете ввести reduxStoreв консоль, щоб отримати об’єкт і copy(reduxStore)скопіювати його в буфер обміну.

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

Ви можете обернути це в, if (process.env.NODE_ENV === 'development')щоб вимкнути його у виробництві.

За допомогою інструментів розробника для реагування:

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();

Хоп, це допомагає.