디버깅하는 동안 브라우저 콘솔에서 Redux 스토어에 액세스 할 수 있습니까?

디버깅하는 동안 브라우저 콘솔에서 Redux 스토어에 액세스 할 수 있습니까?

---

내. reducers에 대한 단위 테스트 가 있습니다. 그러나 브라우저에서 디버깅 할 때 내 작업이 올바르게 호출되었는지 그리고 그에 따라 상태가 수정되었는지 확인하고 싶습니다.

다음과 같은 것을 찾고 있습니다.

window._redux.store

... 브라우저에서 콘솔에 입력하고 어떻게 진행되는지 확인할 수 있습니다.

어떻게 할 수 있습니까?

---

당신이 가지고있는 경우에 사용할 수있는 실행 개발자 도구 반응 $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__

---

디버깅을위한 저장 상태를보고 싶다면 다음과 같이 할 수 있습니다.

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

---

React 개발자 도구 :

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

---

콘솔에 다음 내용 만 작성하면됩니다.

window.store.getState();

도움이 돼요.

참고URL : https://stackoverflow.com/questions/34373462/while-debugging-can-i-have-access-to-the-redux-store-from-the-browser-console