redux toolkit

دي نصيحة الdocs بتاعت الredux 

تجنب وضع قيم غير قابلة للتسلسل مثل الوعود أو الرموز أو الخرائط/المجموعات أو الوظائف أو مثيلات الفئة في حالة متجر Redux أو الإجراءات المرسلة. وهذا يضمن أن الإمكانات مثل تصحيح الأخطاء عبر Redux DevTools ستعمل كما هو متوقع. كما يضمن أيضًا تحديث واجهة المستخدم كما هو متوقع 

بس في حالة إنك عايز تعملى تعطيل إن ويتم وضع قيم غير قابلة التسلسل بإمكان استخدام هذه البوابة 

configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // قم بتجاهل أنواع الإجراءات هنا
        ignoredActions: ['your/action/type'],
        // قم بتجاهل المسارات في جميع الإجراءات هنا
        ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
        // قم بتجاهل هذه المسارات في الحالة
        ignoredPaths: ['items.dates'],
      },
    }),
})

يجب ان تكون القيم قابلة للتسلسل Serializable لتخزينها في redux، ولكن ال ref يعتبر غير قابل للتسلسل non-serializable، 
ولحل هذه المشكلة يمكننا تخزين معرفات بدلاً من ال refs نفسها ومن ثم الوصول إلى ال Dom Elements عن طريق تلك المعرفات كالتالي:-
كود ال slice 

import { createSlice } from '@reduxjs/toolkit';

const mySlice = createSlice({
  name: 'mySlice',
  initialState: {
    elements: {}, // نخزن المراجع هنا بناءا على المعرفات
  },
  reducers: {
    storeElementRef: (state, action) => {
      const { id, ref } = action.payload;
      state.elements[id] = ref;
    },
  },
});

export const { storeElementRef } = mySlice.actions;
export const selectElements = (state) => state.mySlice.elements;

export default mySlice.reducer;

ومن ثم نستخدم هذه المعرفات في الcomponent لتخزينها في ال redux 
 

import { useDispatch } from 'react-redux';
import { useEffect, useRef } from 'react';
import { storeElementRef } from './path-to-your-slice';

const MyComponent = () => {
  const dispatch = useDispatch();
  const myElementRef = useRef(null);

  useEffect(() => {
    // هنا نقوم بتخزين المرجع في الريدكس باستخدام المعرف
    dispatch(storeElementRef({ id: 'uniqueId', ref: myElementRef.current }));
  }, [dispatch]);

  return <div ref={myElementRef}>Hello, World!</div>;
};

وبعدها يكون الاستفادة من ال ref في ال redux slice ممكناً.