مشكل عند تحديث البيانات

بما أنك تستخدم Redux Toolki  لإدارة الحالة الخاصة بالموقع  وفى بادئ الأمر لم تحصل على بيانات المصفوفة من الواجهة البرمجية API SERVER أو من خلال التخزين المحلى localstorage مثلا وتقوم بالإضافة بنفسك إلى المصفوفة وهذا كله يتم على المتصفح ولا تضيف إلى المصفوفة فى قاعده البيانات أو التخزين المحلى فبالتأكيد عند عمل تحديث للصفحة تكون المصفوفة فارغة. 

إذا كنت تستخدم Redux Toolkit لإدارة الحالة الخاصة بالتطبيق الخاص بك وتقوم بإضافة البيانات محليًا دون الرجوع إلى واجهة برمجة التطبيقات (API) أو التخزين المحلي، فسيتم فقدان البيانات عند تحديث الصفحة أو إعادة تحميلها.

لحل هذه المشكلة، يجب عليك البحث عن طرق للحفاظ على البيانات المضافة محليًا بين جلسات التصفح. يمكن القيام بذلك عن طريق استخدام التخزين المحلي مثل LocalStorage أو IndexedDB للحفاظ على البيانات على مستوى المتصفح.

في Redux Toolkit، يمكنك استخدام middleware مثل redux-persist لتحقيق هذا الغرض. يقوم redux-persist بتخزين حالة Redux في التخزين المحلي بطريقة تلقائية، مما يسمح باستعادة حالة التطبيق عند إعادة تحميل الصفحة.

في النهاية، يمكنك استخدام المصفوفة المحلية كحالة افتراضية في Redux، ثم استخدام redux-persist للحفاظ على هذه البيانات بين جلسات التصفح. هذا يسمح لك بالاستفادة من قوة Redux في إدارة الحالة مع الحفاظ على البيانات المهمة عبر عمليات إعادة التحميل وإغلاق المتصفح.

يمكنك تصفح هذه المصادر: 

بتاريخ 3 دقائق مضت قال Mustafa Mahmoud7:

بما أنك تستخدم Redux Toolki  لإدارة الحالة الخاصة بالموقع الخاص بك وفى بادئ الأمر لم تحصل على بيانات المصفوفة من الواجهة البرمجية API SERVER أو من خلال التخزين المحلى localstorage مثلا وتقوم بالإضافة بنفسك إلى المصفوفة وهذا كله يتم على المتصفح ولا تضيف إلى المصفوفة فى قاعده البيانات أو التخزين المحلى فبالتأكيد عند عمل تحديث تكون المصفوفة فارغة. 

هذه هي profileSlice

const profileSlice = createSlice({
  name: "profile",
  initialState: {
    profile: [],
    loading: false, 
    isProfileCreated: false,
  },
  reducers: {
    setProfile(state, action) {
        state.profile = action.payload
    },
    setLoading(state) {
        state.loading = true
    },
    clearLoading(state) {
        state.loading = false
    },
    setIsProfileCreated(state) {
        state.isProfileCreated = true;
        state.loading = false
    },
    clearIsProfileCreated(state) {
        state.isProfileCreated = false;
    },
    addExperience(state, action) {
      state.profile.experience = action.payload
    }
  },
});

profileApiCall

export function createProfile(newProfile) {
    return async(dispatch, getState) => {
        try {
            dispatch(profileActions.setLoading())
            const { data } = await axios.post(PROFILE_URL, newProfile, {
                headers: {
                    'x-auth-token': getState().auth.user.token
                }
            })
            dispatch(profileActions.setProfile(data))
            dispatch(profileActions.setIsProfileCreated())
            setTimeout(
              () => dispatch(profileActions.clearIsProfileCreated()),
              2000
            );
        } catch (error) {
            const err = error.response?.data.msg
            if (err) {
                dispatch(alertActions.createAlert(err));
                dispatch(alertActions.clearAlert(err));
            }

            const errors = error.response.data.errors 
            errors?.forEach((err) => {
                dispatch(alertActions.createAlert(err.msg));
                dispatch(alertActions.clearAlert(err.id));
            });
            dispatch(profileActions.clearLoading())
        }
    }
}