تحديث حالة React باستخدام Deepcopy

في React ، عند استخدام المُخفضات (reducers) ، نستخدم دائمًا Object.assign({}, state, newState) لحفظ حالة جديدة. ومع ذلك، يتم نسخ الإشارة فقط في هذه الحالة، وليس إنشاء نسخ عميقة، وهذا يعني أن أي تغيير في الكائنات متعددة المستويات داخل الحالة الجديدة يمكن أن يؤدي إلى تغييرات غير متوقعة في الحالة السابقة.

عندما يتم تغيير action.data وتكون state.menuList كائنًا متعدد المستويات، فإن هذا التغيير قد يؤثر على state.menuList مباشرةً قبل عملية assign().

الشيفرة التي قدمتها توضح استخدام Object.assign() في reducer لتحديث حالة القائمة (menu state). حيث تم استخدام Object.assign() لإعادة بناء الحالة الجديدة للقائمة باستخدام البيانات الجديدة من الإجراء GET_MENULIST_SUCCESS. ومع ذلك، يُشير السؤال إلى ما إذا كان state.menuList سيتأثر بتغيير action.data قبل عملية assign().

للتأكد من أن التغييرات في action.data لا تؤثر على state.menuList قبل استخدام Object.assign()، يجب عليك استخدام عملية النسخ العميق (deep copy) بدلاً من Object.assign(). توجد عدة طرق للقيام بذلك، مثل استخدام مكتبة مثل lodash أو تنفيذ النسخ العميق يدويًا.

لحل هذه المشكلة، يمكنك استخدام lodash للقيام بالنسخ العميق، حيث يوفر lodash وظيفة cloneDeep() التي تقوم بإنشاء نسخ عميقة للكائنات. وبهذا، يمكنك تجنب أي تأثير غير متوقع على الحالة السابقة.

تحتاج إلى استيراد واستخدام cloneDeep() من مكتبة lodash في مكان مناسب داخل ملف مشروعك. ثم يمكنك استخدامه في reducer بشكل مشابه للشيفرة التالية:

javascriptCopy code
import { cloneDeep } from 'lodash';

const menuListState = {
    menuList: {},
    menuListLoading: false
}

function getMenuList(state = menuListState, action = defaultAction) {
    switch (action.type) {
        // menuList begin
        case actions.GET_MENULIST_SUCCESS:
            // Creating a deep copy of state using cloneDeep
            const newState = cloneDeep(state);
            newState.menuList = action.data;
            newState.menuListLoading = false;
            return newState;

        default:
            return state;
    }
}

بهذا الشكل، ستضمن أن أي تغييرات في action.data لن تؤثر على state.menuList قبل تنفيذ Object.assign()، وبالتالي تحسن من استقرار تطبيقك وتجنب المشاكل المحتملة المتعلقة بالمراجع المشتركة في كائنات متعددة المستويات في React Reducer.

بالطبع، إليك استكمالٌ للمقال:

ومن المهم فهم أهمية النسخ العميقة في تطبيقات React، خاصة عندما يكون لدينا بيانات معقدة تتضمن كائنات متعددة المستويات. عندما نقوم بتحديث حالة التطبيق باستخدام reducers في React، نحتاج إلى التأكد من أننا نعالج البيانات بشكل صحيح لتجنب الأخطاء والمشاكل المحتملة.

إذا تم استخدام Object.assign() فقط دون النظر إلى نسخ عميق، فقد نجد أن التغييرات في بعض الكائنات داخل الحالة الجديدة تؤدي إلى تأثيرات غير متوقعة على الحالة السابقة، وهذا قد يؤدي في النهاية إلى سلوك غير متوقع في التطبيق.

لذلك، يعد استخدام النسخ العميقة ضروريًا في هذه الحالات. مكتبة lodash تقدم وظيفة cloneDeep() التي تسمح بإنشاء نسخ عميقة للكائنات، وبالتالي تضمن عدم وجود تأثيرات جانبية غير متوقعة على الحالة السابقة.

تذكر أنه عند استخدام النسخ العميقة، يجب الحرص على الأداء، خاصة إذا كانت البيانات كبيرة جدًا، حيث يمكن أن يؤدي النسخ العميق إلى تأثير سلبي على أداء التطبيق.

باختصار، يمثل استخدام النسخ العميق في React reducers إحدى الطرق الفعالة لتفادي المشاكل المحتملة المتعلقة بالتعامل مع بيانات معقدة، وهو يسهم في زيادة استقرار وأمان التطبيق.