javascript - русском - redux основы




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

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

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

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

window._redux.store

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

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


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

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


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

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

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

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

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






redux