تغيير الحالة في طرف العميل لا يحصل إلا بعد تحديث الصفحة.

السلام عليكم.

أنا بصدد العمل على مشروع MERN وأستعمل redux toolkit لإدارة حالة التطبيق.

في المثال التالي:

عند الضغط على زر الحذف، لايتم التفعيل إلا بعد تحديث الصفحة.

الكود:

slice

removeEducation(state, action) {
      state.profile.education = state.profile.education.filter(
        (el) => el._id !== action.payload
      );
    },

api call

export function deleteEducation(educId) {
  return async (dispatch, getState) => {
    try {
      const { data } = await axios.delete(
        `${PROFILE_URL}/education/${educId}`,
        {
          headers: {
            "x-auth-token": getState().auth.user.token,
          },
        }
      );
      dispatch(profileActions.removeEducation(data));
      // dispatch(profileActions.setProfile())
    } catch (error) {
      const errors = error.response.data.errors;
      errors?.forEach((err) => {
        dispatch(alertActions.createAlert(err.msg));
        dispatch(alertActions.clearAlert(err.id));
      });
      dispatch(profileActions.clearLoading());
      console.log(error);
    }
  };
}

المكون Education

const handleRemoveEducation = (id) => {
    dispatch(deleteEducation(id));
  };

**********************
{profile?.education.map((educ, index) => (
                      <tr key={index} className="bg-gray-100 border-b">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                          {index + 1}
                        </td>
                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                          {educ.school}
                        </td>
                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                          {educ.degree}
                        </td>
                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                          {educ.current
                            ? `${moment(educ.from).format(
                                "DD MMM YYYY"
                              )} - present`
                            : `${moment(educ.from).format(
                                "DD MMM YYYY"
                              )} - ${moment(educ.to).format("DD MMM YYYY")}`}
                        </td>
                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                          <Button
                            dangerBtn
                            type={"button"}
                            onClick={() => handleRemoveEducation(educ._id)}
                          >
                            Delete
                          </Button>
                        </td>
                      </tr>
                    ))}

شكرا على المساعدة.