Unduh ekstensi redux devtools - unduhan kode sumber ekstensi redux devtools

redux devtools extension

Kode sumber lainnya

v2.17.1

Unduh

️ ️ ️ ️ ️ ️

Repo ini bukan lagi rumah bagi ekstensi redux-devtools. Rumah barunya adalah https://github.com/reduxjs/redux-devtools. Silakan ajukan masalah dan PR Anda di sana.

️ ️ ️ ️ ️ ️

Ekstensi Redux DevTools

Instalasi

1. Untuk krom

dari Toko Web Chrome;
atau unduh extension.zip dari rilis terakhir, unzip, buka url chrome://extensions dan aktifkan mode pengembang dari kiri atas lalu klik; pada Load Unpacked dan pilih folder hasil ekstrak untuk digunakan
atau buat dengan npm i && npm run build:extension dan muat folder ekstensi ./build/extension ;
atau jalankan dalam mode dev dengan npm i && npm start dan muat folder ekstensi ./dev .

2. Untuk Firefox

dari Pengaya Mozilla;
atau buat dengan npm i && npm run build:firefox dan muat folder ekstensi ./build/firefox (cukup pilih file dari dalam direktori).

3. Untuk Elektron

cukup tentukan REDUX_DEVTOOLS di electron-devtools-installer .

4. Untuk browser lain dan lingkungan non-browser

gunakan remote-redux-devtools .

Penggunaan

Perhatikan bahwa mulai dari v2.7, window.devToolsExtension diubah namanya menjadi window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ .

1. Dengan Redux

1.1 Toko dasar

Untuk toko Redux dasar cukup tambahkan:

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

Perhatikan bahwa argumen preloadedState bersifat opsional di createStore Redux.

Untuk aplikasi universal ("isomorfik"), awali dengan typeof window !== 'undefined' && .

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

Untuk TypeScript gunakan paket redux-devtools-extension npm, yang berisi semua definisi, atau cukup gunakan (window as any) (lihat Resep untuk contohnya).

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

Jika ESLint dikonfigurasi untuk tidak mengizinkan penggunaan garis bawah dangle, bungkus seperti ini:

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

Catatan : Melewati penambah sebagai argumen terakhir memerlukan redux@>=3.1.0 . Untuk versi lama terapkan seperti di sini atau di sini. Jangan gabungkan Redux API lama dengan yang baru.

Anda tidak perlu npm install redux-devtools saat menggunakan ekstensi (itu lib yang berbeda).

1.2 Pengaturan toko tingkat lanjut

Jika Anda menyiapkan toko Anda dengan middleware dan peningkat, ubah:

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

Perhatikan bahwa ketika ekstensi tidak dipasang, kami menggunakan penulisan Redux di sini.

Untuk menentukan opsi ekstensi, gunakan seperti ini:

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

Lihat postingan untuk lebih jelasnya.

1.3 Gunakan paket `redux-devtools-extension` dari npm

Untuk mempermudah, ada paket npm yang harus diinstal:

 npm install --save redux-devtools-extension

dan untuk menggunakan seperti ini:

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

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

Untuk menentukan opsi ekstensi:

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

Hanya ada beberapa baris kode yang ditambahkan ke paket Anda.

Jika Anda tidak menyertakan peningkat dan middleware lain, cukup gunakan 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 Penggunaan dalam produksi

Menyertakan ekstensi dalam produksi juga berguna. Biasanya Anda bisa menggunakannya untuk pengembangan.

Jika Anda ingin membatasinya di sana, gunakan 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
) ) ;

atau dengan middleware dan peningkat:

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

Anda harus menambahkan 'process.env.NODE_ENV': JSON.stringify('production') di konfigurasi Webpack Anda untuk bundel produksi (untuk membuat iri). Jika Anda menggunakan create-react-app , itu sudah melakukannya untuk Anda.

Jika Anda sudah memeriksa process.env.NODE_ENV saat membuat penyimpanan, sertakan redux-devtools-extension/logOnly untuk lingkungan produksi.

Jika Anda tidak ingin mengizinkan ekstensi dalam produksi, gunakan saja redux-devtools-extension/developmentOnly .

Lihat artikel untuk lebih jelasnya.

1.5 Untuk aplikasi Redux sisi React Native, hybrid, desktop dan server

Untuk React Native kita bisa menggunakan react-native-debugger , yang sudah menyertakan API yang sama dengan Redux DevTools Extension.

Untuk sebagian besar platform, sertakan penyempurna penyimpanan Remote Redux DevTools , dan dari menu konteks ekstensi pilih 'Buka Remote DevTools' untuk pemantauan jarak jauh.