كيفية تشغيل redux devtools في next js

سبب هذا الخطأ هو أن مجموعة أدوات تطوير ريدكس(redux dev-tools) تعمل على المتصفح بينما الnext js تعمل على الخادم مما يسبب مشاكل, فعندما نقوم بإستخدام React. js كنا نقوم بكتابة شفرة برمجية كتلك 

const store = createStore(reducer
  , window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ولكن عند كتابة تلك الشفرة في Next.js سيتسبب ذلك بمشكلة لأن كما أخبرتك أن الnext js تعمل على الخادم أولاً حتى تحقق ال static-site-generating أو ال server-side rendering و الكائن window هو أحد الكائنات الخاصة بالمتصفح وبما أن الشفرة البرمجية تعمل عند الخادم أولاً فبالتالي لن يمكنها الوصول إلى الكائنات الخاصة بالمتصفح.

الحل: أن نقوم بالتأكد أولاً من كون الشفرة البرمجية يتم تنفيذها على المتصفح وليس على الخادم حتى ﻻ تتسبب بأخطاء, ويمكننا التحقق من ذلك عن طريق التحقق من توفر الكائن window , ويمكن كتابة الشفرة البرمجية على النحو التالي:

const enhancer =  (typeof window !== 'undefined' && window.devToolsExtension) ?  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f

const store = createStore(reducer
    ,enhancer);

هكذا نقوم بالتأكد أولاً أن الشفرة البرمجية تعمل بالمتصفح وأن مجموعة الأدوات تعمل بنجاح

تأكد من تعزيز ال Middlewares في مشروعك بمحسن الاضافة ليتم الربط مع الإضافة، كالتالي 

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, preloadedState, composeEnhancers(
	applyMiddleware(...middleware /* مرر كل الـ middlewares التي تستخدمها هنا */)
));

من فضلك أرفق الخطأ الذي يظهر لك إن لم تنجح بتنفيذ الربط

بتاريخ 2 دقائق مضت قال Hassan Hedr:

تأكد من تعزيز ال Middlewares في مشروعك بمحسن الاضافة ليتم الربط مع الإضافة، كالتالي 

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, preloadedState, composeEnhancers(
	applyMiddleware(...middleware /* مرر كل الـ middlewares التي تستخدمها هنا */)
));

من فضلك أرفق الخطأ الذي يظهر لك إن لم تنجح بتنفيذ الربط

ﻻ اقوم باستخدام middlewares هل اقوم بتمرير مصفوفة فارغة ام ماذا افعل تحديدا

بتاريخ 5 دقائق مضت قال مروان محمود3:

ﻻ اقوم باستخدام middlewares هل اقوم بتمرير مصفوفة فارغة ام ماذا افعل تحديدا

يمكنك تمرير المعزز كالتالي، ويمكنك أيضا الاستغناء عن تمرير preloadedState اذا كنت لا تستخدم حالة ابتدائية

import { createStore } from 'redux';

...

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

const store = createStore(reducer, preloadedState, composeEnhancers));