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

Program / 글쓴이

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

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

window._redux.store

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

어떻게 할 수 있습니까?

답변

코드 변경없이 모든 웹 사이트에서 redux 스토어를 보는 방법

2019 년 11 월 업데이트

내 원래 답변 이후 반응 devtools가 변경되었습니다. components크롬 개발 도구의 새 탭에는 여전히 데이터가 있지만 조금 더 검색해야 할 수도 있습니다.

  1. 크롬 devTools 열기
  2. react devtool의 Components탭을 선택 하십시오.
  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')하여 프로덕션에서 비활성화 할 수 있습니다 .