إلغاء الطلبات المتكررة في Redux-Thunk باستخدام Axios

في عالم تطوير تطبيقات React/Redux، يُعَدّ استخدام middleware redux-thunk أمرًا شائعًا لإدارة الطلبات الرمزية (Ajax requests) والتحكم في العمليات الغير متزامنة. إن تحقيق إلغاء الطلبات السابقة عند إطلاق طلب جديد يعتبر تحدًا في هذا السياق.

للتعامل مع هذا السيناريو، يمكنك اللجوء إلى استخدام مكتبة تُدعى “axios”، وهي مكتبة تفاعلية لإجراء الطلبات. يمكن أن تكون لديك وظيفة لتنفيذ الإلغاء عند إطلاق طلب جديد. فيما يلي مثال توضيحي:

javascriptCopy code
import axios from 'axios';

let cancelTokenSource;

const fetchData = async (dispatch) => {
  // إلغاء الطلب السابق إذا كان موجودًا
  if (cancelTokenSource) {
    cancelTokenSource.cancel('Operation canceled by the user.');
  }

  // إنشاء مصدر للإلغاء
  cancelTokenSource = axios.CancelToken.source();

  try {
    // إرسال الطلب مع الاستخدام المصدر للإلغاء
    const response = await axios.get('/api/data', {
      cancelToken: cancelTokenSource.token,
    });

    // يمكنك الآن استخدام البيانات المستلمة
    dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
  } catch (error) {
    if (axios.isCancel(error)) {
      // تم إلغاء الطلب بواسطة المستخدم
      console.log('Request canceled', error.message);
    } else {
      // حدث خطأ آخر أثناء الطلب
      dispatch({ type: 'FETCH_ERROR', payload: error.message });
    }
  }
};

export default fetchData;

في هذا المثال، يتم إنشاء cancelTokenSource عند إطلاق الطلب الجديد، ويُلغى الطلب السابق إذا كان قائمًا. يتم ذلك باستخدام خاصية cancelToken المقدمة من axios. وعندما يتم إلغاء الطلب، يتم التحقق من ذلك باستخدام axios.isCancel للتأكد مما إذا كان الإلغاء ناتجًا عن طلب سابق أم لا.

تأكد من تكامل هذا النهج مع تطبيقك، واستخدامه بناءً على متطلبات مشروعك وهيكل التطبيق الخاص بك.

بالطبع، دعنا نعمق في مفهوم إلغاء الطلبات وكيفية تنفيذه في تطبيق React/Redux باستخدام redux-thunk وaxios.

أولًا وقبل كل شيء، يجب علينا التأكد من تكوين middleware redux-thunk في تطبيقنا. يمكنك فعل ذلك عن طريق تثبيته واستخدامه كجزء من تكوين store الخاص بك. في سياق التطبيق، يمكنك تضمينه كالتالي:

javascriptCopy code
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // استبداله بجذر متر reducer الخاص بك

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

ثم، فيما يتعلق بإلغاء الطلبات، يمكنك إضافة خطوة إضافية في reducer للتعامل مع حالة الإلغاء. على سبيل المثال:

javascriptCopy code
// في reducer الخاص بك

const initialState = {
  data: null,
  loading: false,
  error: null,
  isCancelled: false,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true, isCancelled: false };

    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload, isCancelled: false };

    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload, isCancelled: false };

    case 'CANCEL_REQUEST':
      return { ...state, isCancelled: true };

    default:
      return state;
  }
};

export default dataReducer;

ثم يمكنك تحديث actions وthunks الخاصة بك للتفاعل مع هذا التحديث في reducer. على سبيل المثال، يمكنك تحديث thunk ليشمل إلغاء الطلب كما يلي:

javascriptCopy code
// في actions/thunks الخاص بك

import axios from 'axios';

export const fetchData = () => {
  return async (dispatch, getState) => {
    const { isCancelled } = getState().data;

    // تحقق مما إذا كان الطلب قد تم إلغاؤه بالفعل
    if (isCancelled) {
      return;
    }

    dispatch({ type: 'FETCH_START' });

    try {
      const response = await axios.get('/api/data');

      // يمكنك أيضًا التحقق هنا مما إذا كان الطلب قد تم إلغاؤه بينما كان قيد التنفيذ
      const { isCancelled: currentIsCancelled } = getState().data;
      if (currentIsCancelled) {
        return;
      }

      dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
    } catch (error) {
      // يتم تجاوز الخطأ إذا تم إلغاء الطلب
      if (axios.isCancel(error)) {
        dispatch({ type: 'CANCEL_REQUEST' });
        console.log('Request canceled', error.message);
      } else {
        dispatch({ type: 'FETCH_ERROR', payload: error.message });
      }
    }
  };
};

هذا النهج يسمح لك بتحقيق إلغاء الطلبات في تطبيق React/Redux الخاص بك بشكل فعال. يجب عليك تكامل هذه الفعالية في سياق تطبيقك بناءً على الهندسة المعمارية والمتطلبات الخاصة بمشروعك.