redux devtools extension

️ ️ ️ ️ ️ ️

لم يعد هذا الريبو موطنًا لامتداد redux-devtools. المنزل الجديد هو 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 ;
• أو قم بتشغيله في وضع التطوير باستخدام npm i && npm start وتحميل مجلد الامتداد ./dev .

2. لمتصفح فايرفوكس

• من إضافات موزيلا؛
• أو قم بإنشائه باستخدام npm i && npm run build:firefox وقم بتحميل مجلد الامتداد ./build/firefox (فقط حدد ملفًا من داخل الدليل).

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.

بالنسبة للتطبيقات العامة ("المتماثلة")، ابدأها بـ 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 القديمة مع الواجهة الجديدة.

لا تحتاج إلى تثبيت npm redux-devtools عند استخدام الامتداد (وهذا 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 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 استخدم حزمة 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 Native

بالنسبة إلى React Native، يمكننا استخدام react-native-debugger ، والذي يتضمن بالفعل نفس واجهة برمجة التطبيقات مع ملحق Redux DevTools.

بالنسبة لمعظم الأنظمة الأساسية، قم بتضمين مُحسِّن متجر Remote Redux DevTools ، ومن قائمة سياق الامتداد اختر "Open Remote DevTools" للمراقبة عن بعد.

2. بدون ريدوكس

راجع عمليات التكامل ومنشور المدونة للحصول على مزيد من التفاصيل حول كيفية استخدام الامتداد مع أي بنية.

المستندات

• الخيارات (الوسائط)
• الأساليب (واجهة برمجة التطبيقات المتقدمة)
• التعليمات
• سمات
  • تتبع مكالمات الإجراءات
• استكشاف الأخطاء وإصلاحها
• مقالات
• فيديوهات
• تعليق

تجريبي

عروض توضيحية مباشرة لاستخدام الامتداد مع:

• عداد
• TodoMVC
• نموذج الإعادة
• رد فعل تتريس
• مجموعة الكتب (متجر Angular ngrx)

راجع أيضًا مجلد ./examples .

المؤيدون

ادعمنا بتبرع شهري وساعدنا على مواصلة أنشطتنا. [كن داعمًا]

الرعاة

كن راعيًا واحصل على شعارك على ملف README الخاص بنا على Github مع رابط لموقعك. [كن راعيًا]

رخصة

معهد ماساتشوستس للتكنولوجيا

تم الإنشاء بواسطة

إذا أعجبك هذا، تابع @mdiordiev على تويتر.