أواجه مشكل في تحديث البيانات باستعمال redux toolkit

مرحبا محمود 
أنت بالفعل تقوم بالإضافة إلى قاعدة البيانات وفى نفس الوقت تضيف فى المصفوفة ولكن عند تحديث الصفحة فى البداية لابد من جلب البيانات و إضافتها إلى المصفوفة ومن ثم إجراء العمليات على المصفوفة للقيام بهذه الإجراء اقترح عليك استخدام createAsyncThunk وهذه الدالة موجوده داخل الredux Toolkit لمعالجة العمليات الغير متزامنة في الأكشنز (actions) في Redux و تستطيع عن طريقها مشاركة البيانات التى تحصل عليها منAPI SERVER فى كل المكونات والوصول لها من أى مكون. 
وهذا مثال بسيط لاستخدامها

import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// تعريف ال async thunk
export const fetchData = createAsyncThunk(
  'data/fetchData', // نوع الأكشن
  async (arg, thunkAPI) => {
    try {
      const response = await axios.get('https://api.example.com/data');
      return response.data;
    } catch (error) {
      // التعامل مع الأخطاء، يمكنك إرسال أكشن آخر أو إلقاء الخطأ
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

// استخدام ال async thunk في الـ slice
import { createSlice } from '@reduxjs/toolkit';

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    loading: false,
    data: null,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [fetchData.pending]: (state) => {
      state.loading = true;
      state.error = null;
    },
    [fetchData.fulfilled]: (state, action) => {
      state.loading = false;
      state.data = action.payload;
    },
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
  },
});

export default dataSlice.reducer;

حيث في هذا المثال:

• createAsyncThunk تنشئ async thunk action creator بإسم fetchData. يأخذ هذا المنشئ نوع الأكشن ('data/fetchData') ودالة غير مزامنة تقوم بأداء عملية مزامنة (هنا، طلب بيانات من API).
• createSlice تنشئ slice لتخزين الحالة (state) والأكشنز والريدوسيرز (reducers).
• extraReducers تعرف كيفية التعامل مع نتائج ال async thunk مثل (التعليق)pending,  (الإكتمال)fulfilled, و(الرفض ) rejected.

بالتوفيق.. 

مرحباً, أنت تقوم ببعض العمليات على profile slice , ولكن ما تواجهه أنه البيانات تزول عندما تقوم بتحديث الصفحة أو إعادة تحميلها بأي شكل , هذا بالطبع سيحدث كون redux toolkit بشكل إفتراضي لا تقوم بحفظ البيانات بشكل دائم في المتصفح ( local storage او اي شكل اخر ) , وإنما تقوم بحفظها بشكل مؤقت في المتصفح وعند إعادة تحميل الصفحة سوف تزول جميع العمليات التي قمت بها .

لحل هذه المشكلة ( او ما تبحث عنه ) يمكنك فعلها بطريقتين:

• إما باستخدام localStorage , وتقوم بحفظ وتعديل البيانات في localStorage كلما قمت بتعديل redux toolkit slice , وفي كل مرة تقوم بتشغيل التطبيق تفحص إذا كان هناك بيانات مخزنة في localStorage فتقوم بإستردادها ل profile slice , يمكنك تعديل الكود لديك كالشكل التالي :

أولاً قم بتحديث create  profile action لتتضمن تخزين البيانات في local storage :

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())

            localStorage.setItem('profileData', JSON.stringify(data));

            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())
        }
    }
}

ثانياً ، عند بدء التطبيق، يمكنك التحقق مما إذا كانت هناك بيانات مخزنة واستخدامها , يمكنك وضع الكود التالي في layout او component الصفحة الاساسية .

useEffect(() => {
    const storedData = localStorage.getItem('profileData');
    if (storedData) {
        dispatch(profileActions.setProfile(JSON.parse(storedData)));
    }
}, []);

• الطريقة الثانية , تسمى هذه التقنية redux persist , هي مكتبة تساعد في حفظ حالة التطبيق في تطبيقات React Redux عبر عملية التخزين المحلي. تسمح هذه المكتبة بالاحتفاظ بحالة Redux الحالية حتى بعد إعادة تحميل الصفحة أو إعادة فتح التطبيق عن طريق استخدام localStorage أو AsyncStorage في React Native.