redux devtools extension
v2.17.1
extension.zipダウンロードして解凍し、 chrome://extensions URL を開いて、左上から開発者モードをオンにしてクリックします。 Load Unpacked 、使用する解凍されたフォルダーを選択しますnpm i && npm run build:extensionを使用してビルドし、拡張機能のフォルダー./build/extensionをロードします。npm i && npm startを使用して開発モードで実行し、拡張機能のフォルダー./devをロードします。npm i && npm run build:firefoxでビルドし、拡張機能のフォルダー./build/firefoxをロードします (ディレクトリ内からファイルを選択するだけです)。electron-devtools-installerでREDUX_DEVTOOLS指定するだけです。remote-redux-devtoolsを使用します。 v2.7 以降、
window.devToolsExtensionの名前がwindow.__REDUX_DEVTOOLS_EXTENSION__/window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__に変更されたことに注意してください。
基本的な Redux ストアの場合は、以下を追加するだけです。
const store = createStore(
reducer, /* preloadedState, */
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); Redux のcreateStoreでは、 preloadedState引数はオプションであることに注意してください。
ユニバーサル (「同型」) アプリの場合は、
typeof window !== 'undefined' &&プレフィックスとして付けます。
const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;TypeScript の場合は、すべての定義が含まれる
redux-devtools-extensionnpm パッケージを使用するか、単に(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 */注: 最後の引数としてエンハンサーを渡すには、redux@>=3.1.0が必要です。古いバージョンの場合は、ここまたはここのように適用します。古い Redux API と新しい Redux API を混合しないでください。
拡張機能 (別のライブラリ) を使用する場合は、npm install
redux-devtoolsを実行する必要はありません。
ミドルウェアとエンハンサーを使用してストアをセットアップする場合は、次を変更します。
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 ) ;詳細については投稿を参照してください。
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
) ) ;実稼働環境にも拡張機能を含めると便利です。通常は開発に使用できます。
そこで制限したい場合は、 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
) ) ;本番バンドルの Webpack 設定に
'process.env.NODE_ENV': JSON.stringify('production')を追加する必要があります (羨望するため)。create-react-app使用すると、すでにそれが行われます。
ストアの作成時にprocess.env.NODE_ENVをすでにチェックしている場合は、運用環境用にredux-devtools-extension/logOnlyを含めます。
運用環境で拡張機能を許可したくない場合は、 redux-devtools-extension/developmentOnly使用してください。
詳細については記事を参照してください。
React Native の場合、 react-native-debugger使用できます。これには、Redux DevTools Extension と同じ API がすでに含まれています。
ほとんどのプラットフォームでは、 Remote Redux DevToolsのストア エンハンサーを組み込み、拡張機能のコンテキスト メニューから [Open Remote DevTools] を選択してリモート監視を行います。
任意のアーキテクチャで拡張機能を使用する方法の詳細については、統合とブログ投稿を参照してください。
拡張機能を使用するためのライブ デモ:
./examplesフォルダーも参照してください。
毎月のご寄付でご支援いただき、活動継続にご協力ください。 【後援者になる】
スポンサーになり、Github の README でロゴをサイトへのリンクとともに取得してください。 【スポンサーになる】
マサチューセッツ工科大学
これが気に入ったら、twitter で @mdiordiev をフォローしてください。
