redux devtools extension

repo นี้ไม่ใช่บ้านของ redux-devtools-extension อีกต่อไป บ้านใหม่คือhttps://github.com/reduxjs/redux-devtools กรุณายื่นประเด็นปัญหาและประชาสัมพันธ์ของคุณที่นั่น

ส่วนขยาย Redux DevTools

การติดตั้ง

1. สำหรับโครม

• จาก Chrome เว็บสโตร์
• หรือดาวน์โหลด extension.zip จากรุ่นล่าสุด แตกไฟล์ เปิด chrome://extensions url แล้วเปิดโหมดนักพัฒนาซอฟต์แวร์จากด้านซ้ายบน จากนั้นคลิก บน Load Unpacked และเลือกโฟลเดอร์ที่แตกออกมาเพื่อใช้งาน
• หรือสร้างมันด้วย npm i && npm run build:extension และโหลดโฟลเดอร์ของส่วนขยาย ./build/extension ;
• หรือรันในโหมด dev ด้วย npm i && npm start และโหลดโฟลเดอร์ของส่วนขยาย ./dev dev

2. สำหรับไฟร์ฟอกซ์

• จากโปรแกรมเสริม Mozilla;
• หรือสร้างมันด้วย npm i && npm run build:firefox และโหลดโฟลเดอร์ของส่วนขยาย ./build/firefox (เพียงเลือกไฟล์จากภายใน dir)

3. สำหรับอิเล็กตรอน

• เพียงระบุ REDUX_DEVTOOLS ใน electron-devtools-installer

4. สำหรับเบราว์เซอร์อื่นและสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์

• ใช้ remote-redux-devtools

การใช้งาน

โปรดทราบว่าตั้งแต่เวอร์ชัน 2.7 เป็นต้นไป window.devToolsExtension ถูกเปลี่ยนชื่อเป็น window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

1. ด้วยรีดักซ์

1.1 ร้านค้าขั้นพื้นฐาน

สำหรับร้านค้า Redux พื้นฐาน เพียงเพิ่ม:

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

โปรดทราบว่าอาร์กิวเมนต์ preloadedState เป็นทางเลือกใน createStore ของ Redux

สำหรับแอปสากล ("isomorphic") ให้นำหน้าด้วย 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 */

หมายเหตุ : การส่งผ่านตัวเพิ่มประสิทธิภาพเป็นอาร์กิวเมนต์สุดท้ายต้องใช้ redux@>=3.1.0 สำหรับเวอร์ชันเก่าให้ใช้ดังนี้ ที่นี่ หรือ ที่นี่ อย่าผสม Redux API เก่ากับอันใหม่

คุณไม่จำเป็นต้องติดตั้ง redux-devtools npm เมื่อใช้ส่วนขยาย (นั่นคือ lib อื่น)

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 ที่นี่

หากต้องการระบุตัวเลือกของส่วนขยาย ให้ใช้ดังนี้:

 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 ใช้แพ็คเกจ redux-devtools-extension จาก npm

เพื่อให้สิ่งต่าง ๆ ง่ายขึ้น มีแพ็คเกจ 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
) ) ;

คุณจะต้องเพิ่ม 'process.env.NODE_ENV': JSON.stringify('production') ในการกำหนดค่า Webpack ของคุณสำหรับชุดการผลิต (เพื่อยืนยัน) หากคุณใช้ create-react-app มันทำเพื่อคุณแล้ว

หากคุณกำลังตรวจสอบ process.env.NODE_ENV อยู่แล้วเมื่อสร้างร้านค้า ให้รวม redux-devtools-extension/logOnly สำหรับสภาพแวดล้อมการใช้งานจริง

หากคุณไม่ต้องการอนุญาตส่วนขยายในการใช้งานจริง เพียงใช้ redux-devtools-extension/developmentOnly

ดูบทความสำหรับรายละเอียดเพิ่มเติม

1.5 สำหรับแอป Redux แบบเนทีฟ ไฮบริด เดสก์ท็อป และเซิร์ฟเวอร์ React

สำหรับ React Native เราสามารถใช้ react-native-debugger ซึ่งมี API เดียวกันกับ Redux DevTools Extension อยู่แล้ว

สำหรับแพลตฟอร์มส่วนใหญ่ ให้รวมตัวเพิ่มประสิทธิภาพร้านค้าของ Remote Redux DevTools และจากเมนูบริบทของส่วนขยาย ให้เลือก 'เปิด Remote DevTools' สำหรับการตรวจสอบระยะไกล

2. ไม่มี Redux

ดูการบูรณาการและโพสต์บนบล็อกสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการใช้ส่วนขยายกับสถาปัตยกรรมใดๆ

เอกสาร

• ตัวเลือก (อาร์กิวเมนต์)
• วิธีการ (API ขั้นสูง)
• คำถามที่พบบ่อย
• คุณสมบัติ
  • ติดตามการดำเนินการเรียก
• การแก้ไขปัญหา
• บทความ
• วิดีโอ
• ข้อเสนอแนะ

สาธิต

การสาธิตสดเพื่อใช้ส่วนขยายกับ:

• เคาน์เตอร์
• TodoMVC
• แบบฟอร์มรีดักซ์
• โต้ตอบ Tetris
• คอลเลกชันหนังสือ (ร้าน Angular ngrx)

ดูโฟลเดอร์ . ./examples ด้วย

ผู้สนับสนุน

สนับสนุนเราด้วยการบริจาครายเดือนและช่วยเราดำเนินกิจกรรมของเราต่อไป [มาเป็นผู้สนับสนุน]

สปอนเซอร์

ร่วมเป็นผู้สนับสนุนและรับโลโก้ของคุณบน README บน Github พร้อมลิงก์ไปยังเว็บไซต์ของคุณ [มาเป็นสปอนเซอร์]

ใบอนุญาต

เอ็มไอที

สร้างโดย

หากคุณชอบสิ่งนี้ ติดตาม @mdiordiev บน Twitter