redux devtools extension

️ ️ ️ ️ ️ ️

이 저장소는 더 이상 redux-devtools-extension의 본거지가 아닙니다. 새 홈은 https://github.com/reduxjs/redux-devtools입니다. 거기에 문제와 PR을 제출해 주세요.

️ ️ ️ ️ ️ ️

Redux DevTools 확장

설치

1. 크롬의 경우

• Chrome 웹 스토어에서;
• 또는 최신 릴리스에서 extension.zip 다운로드하고 압축을 풀고 chrome://extensions URL을 열고 왼쪽 상단에서 개발자 모드를 켠 다음 클릭하세요. Load Unpacked 에서 사용할 추출된 폴더를 선택합니다.
• 또는 npm i && npm run build:extension 으로 빌드하고 확장 프로그램의 폴더 ./build/extension 을 로드합니다.
• 또는 npm i && npm start 사용하여 개발 모드에서 실행하고 확장 프로그램의 폴더 ./dev 를 로드하세요.

2. 파이어폭스의 경우

• Mozilla 애드온에서;
• 또는 npm i && npm run build:firefox 사용하여 빌드하고 확장 프로그램의 폴더 ./build/firefox 를 로드합니다(디렉터리 내부에서 파일을 선택하기만 하면 됩니다).

3. 전자의 경우

• electron-devtools-installer 에 REDUX_DEVTOOLS 지정하면 됩니다.

4. 기타 브라우저 및 비브라우저 환경의 경우

• remote-redux-devtools 사용하세요.

용법

v2.7부터 window.devToolsExtension 의 이름이 window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 로 변경되었습니다.

1. Redux를 사용하면

1.1 기본 매장

기본 Redux 저장소의 경우 간단히 다음을 추가하세요.

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

preloadedState 인수는 Redux의 createStore 에서 선택 사항입니다.

범용("동형") 앱의 경우 접두사로 typeof window !== 'undefined' && 붙입니다.

 const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;

TypeScript의 경우 모든 정의가 포함된 redux-devtools-extension npm 패키지를 사용하거나 (window as any) 사용하세요(예제는 레시피 참조).

 const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;

ESLint가 밑줄 매달기 사용을 허용하지 않도록 구성된 경우 다음과 같이 래핑합니다.

 + /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */

참고 : Enhancer를 마지막 인수로 전달하려면 redux@>=3.1.0 이 필요합니다. 이전 버전의 경우 여기 또는 여기처럼 적용하세요. 기존 Redux API와 새 API를 혼합하지 마세요.

확장 기능(다른 lib)을 사용할 때 npm install redux-devtools 필요하지 않습니다.

1.2 고급 스토어 설정

미들웨어 및 인핸서로 스토어를 설정하는 경우 다음을 변경하십시오.

  import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

확장 기능이 설치되지 않은 경우 여기서는 Redux compose를 사용하고 있습니다.

확장 옵션을 지정하려면 다음과 같이 사용하세요.

 const composeEnhancers =
  typeof window === 'object' &&
  window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ( {
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    } ) : compose ;

const enhancer = composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ;
const store = createStore ( reducer , enhancer ) ;

자세한 내용은 게시물을 참조하세요.

1.3 npm의 redux-devtools-extension 패키지 사용

작업을 더 쉽게 하기 위해 npm 패키지를 설치할 수 있습니다.

 npm install --save redux-devtools-extension

다음과 같이 사용합니다.

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const store = createStore ( reducer , composeWithDevTools (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

확장 옵션을 지정하려면:

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension' ;

const composeEnhancers = composeWithDevTools ( {
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

번들에 코드 몇 줄만 추가하면 됩니다.

다른 인핸서 및 미들웨어를 포함하지 않는 경우 devToolsEnhancer 사용하세요.

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
) ) ;

1.4 프로덕션에서 사용

프로덕션에도 확장을 포함하는 것이 유용합니다. 일반적으로 개발에 사용할 수 있습니다.

여기서 제한하려면 redux-devtools-extension/logOnlyInProduction 사용하세요.

 import { createStore } from 'redux' ;
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction' ;

const store = createStore ( reducer , /* preloadedState, */ devToolsEnhancer (
  // options like actionSanitizer, stateSanitizer
) ) ;

또는 미들웨어 및 강화 기능을 사용하여:

 import { createStore , applyMiddleware } from 'redux' ;
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction' ;

const composeEnhancers = composeWithDevTools ( {
  // options like actionSanitizer, stateSanitizer
} ) ;
const store = createStore ( reducer , /* preloadedState, */ composeEnhancers (
  applyMiddleware ( ... middleware ) ,
  // other store enhancers if any
) ) ;

(enify하려면) 프로덕션 번들에 대한 Webpack 구성에 'process.env.NODE_ENV': JSON.stringify('production') 을 추가해야 합니다. create-react-app 사용하면 이미 해당 작업이 수행됩니다.

스토어를 생성할 때 이미 process.env.NODE_ENV 확인하고 있다면 프로덕션 환경에 redux-devtools-extension/logOnly 포함하세요.

프로덕션에서 확장을 허용하지 않으려면 redux-devtools-extension/developmentOnly 사용하세요.

자세한 내용은 기사를 참조하세요.

1.5 React Native, 하이브리드, 데스크톱 및 서버 측 Redux 앱의 경우

React Native의 경우 Redux DevTools Extension과 동일한 API가 이미 포함된 react-native-debugger 사용할 수 있습니다.

대부분의 플랫폼의 경우 Remote Redux DevTools 의 저장소 강화 기능을 포함하고 확장의 컨텍스트 메뉴에서 원격 모니터링을 위해 'Open Remote DevTools'를 선택합니다.

2. Redux 없이

모든 아키텍처에서 확장 기능을 사용하는 방법에 대한 자세한 내용은 통합 및 블로그 게시물을 참조하세요.

문서

• 옵션(인수)
• 메소드(고급 API)
• FAQ
• 특징
  • 추적 작업 호출
• 문제 해결
• 조항
• 비디오
• 피드백

데모

다음과 함께 확장 기능을 사용하는 라이브 데모:

• 계수기
• 토도MVC
• 리덕스 양식
• 테트리스 반응
• 도서 컬렉션(Angular ngrx 스토어)

./examples 폴더도 참조하세요.

후원자

매달 기부금으로 후원해 주시고, 활동을 계속할 수 있도록 도와주세요. [후원자가 되세요]

후원자

스폰서가 되어 Github의 README에 귀하의 사이트 링크가 포함된 로고를 얻으세요. [후원자가 되세요]

특허

MIT

작성자

마음에 드신다면 트위터에서 @mdiordiev를 팔로우하세요.