كيفية ايقاف جزء من الشيفرة عن العمل في react

أولا يجب أن تتحقق أنك قمت بتثبيت مكتبة react-devtool فقط في البيئة التطويرية وذلك عن طريق

npm i --save-dev redux-devtools-extension

أو

yarn add -D redux-devtools-extension

ثانيا ستقوم بجملة شرطية تتحقق بها من بيئة العمل فاذا كانت بيئة العمل ليست في production mode تقوم باستيراد المكتبة وتقوم بتطبيقها عادي هكذا عندما تجلب المشروع لتحاول التعديل عليه في المستقبل في البيئة التطويرية ستكون ال redux devtools تعمل

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistReducer } from 'redux-persist';
// import { composeWithDevTools } from 'redux-devtools-extension';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers/rootReducer';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const bindMiddleware = (middleware) => {
//   return composeWithDevTools(applyMiddleware(...middleware));
    if (process.env.NODE_ENV !== 'production') {
    import { composeWithDevTools } from 'redux-devtools-extension';
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const store = createStore(persistedReducer, bindMiddleware([thunk]));

export default store;

دعني أعطيك مقدمة بسيطة لفهم طريقة عمل الحزم عامةً.

عند العمل مع مدير حزم، مثل npm، عليك أن تضع في اعتبارك أن الحزم التي تقوم بتثبيتها لها أنواع. افتراضيًا، يتم تثبيت الحزم بعلامة --save. تعني هذه العلامة أنه سيتم تثبيت الحزمة التالية عندما يقوم شخص ما بتشغيل npm install. على الجانب الآخر، يوجد إختيار save-dev--. إذا قمت بإستخدام هذا الشعار عند عمل install لحزمة معينة، سيتم وضعها في قائمة "حزم التطوير" أو الـ Development Dependencies. تحتوي هذه القائمة على الحزم التي يحتاجها المطور في مرحلة تطوير البرنامج فقط وليس في مرحلة الـ build الذي سيعمل بداخل المتصفح أو الخادم.

عند تطوير أي تطبيق، ستجد أنه يمكنك عمل بيئات متعددة للتطوير. البيئات الأكثر شيوعًا هي بيئة الإنتاج (production) وبيئة التطوير (development).

يمكنك استخدام الحزم المثبتة بشروط وفقًا للبيئة المستهدفه عن طريق متغيرات البيئة (environment variables):

// يحتوي هذا المتغير على إسم بيئة العمل
process.env.NODE_ENV

على سبيل المثال، لو أردنا إستخدام حزمة XYZ لو لم تكن بيئة العمل هي الـ production، سنقوم بكتابة:

if (process.env.NODE_ENV !== 'production') {
  require('XYZ').abc();
  // import أو يمكنك إستخدام
}

وفي النهاية، عند تشغيل التطبيق يمكنك أن تكتب run scripts بداخل ملف الـ package.json لعمل تشغيل بطرق مختلفة على حسب بيئة العمل. مثلا، لدى Node.js مكتبة Nodemon التي تعمل على عمل restart للـ server عندما تقوم بعمل تغيير في أي ملف بدلاً من أن تقوم بذلك يدوياً. فبالتأكيد، مكتبة مثل Nodemon مكانها الوحيد في بيئة التطوير، لذا يمكننا كتابة الـ scripts التالية:

// package.json
{
  "scripts": {
  	"start": "node index.js",
  	"dev": "nodemon index.js"
  }
}

طريقة الإستخدام:

npm run start

أو

// التطوير
npm run dev