كيفية إحضار البيانات باستخدام Redux-Saga في تطبيق React

كيفية إحضار البيانات باستخدام Redux-Saga في تطبيق React
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

تعتبر React و Redux أدوات تطوير ويب شائعة لإدارة الحالة وتطوير واجهات مستخدم ديناميكية.





قد يكون الوصول إلى المعلومات أمرًا صعبًا ويستغرق وقتًا طويلاً ، خاصة عند التعامل مع الأحداث غير المتزامنة. يمكن لـ Redux-Saga ، وهي حزمة برمجية وسيطة سهلة الاستخدام تدير أنشطة غير متزامنة ، تبسيط هذه العملية.





كيفية إعادة تشغيل ماك بوك برو
اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

تعرف على كيفية React لبناء تطبيق يقوم باسترداد البيانات من Redux-Saga.





فهم Redux-Saga

Redux-Saga عبارة عن حزمة برمجية وسيطة تجعل إدارة الآثار الجانبية واختبارها أسهل مثل الوصول إلى تخزين المتصفح وطلبات واجهة برمجة التطبيقات غير المتزامنة. يؤدي استخدام وظائف المولد إلى جعل الشفرة غير المتزامنة تبدو متزامنة ، مما يسهل التفكير وتصحيح الأخطاء.

تعمل Redux-Saga من خلال البحث عن إجراءات Redux محددة وتشغيل Sagas ، وهي وظائف منشئ التأثير الجانبي. يمكن لـ Sagas تشغيل عمليات غير متزامنة ، مثل الحصول على البيانات من واجهة برمجة التطبيقات ، ثم إرسال إجراء Redux جديد لتحديث الحالة.



خذ مثالاً على استخدام Redux-Saga لإدارة استدعاءات واجهة برمجة التطبيقات غير المتزامنة. ابدأ بإنشاء إجراء Redux يبدأ إجراء جمع البيانات:

 export const FETCH_DATA = 'FETCH_DATA'; 

export const fetchData = (params) => ({
  type: FETCH_DATA,
  payload: params,
});

تتضمن حمولة الإجراء ، FETCH_DATA ، أي معلمات أساسية ، مثل نقطة نهاية واجهة برمجة التطبيقات ومعلمات الطلب.





بعد ذلك ، حدد الملحمة التي تستمع إلى نشاط FETCH_DATA وتقوم بجمع البيانات:

 import { call, put, takeLatest } from 'redux-saga/effects'; 
import axios from 'axios';

export function* fetchDataSaga(action) {
  try {
    const response = yield call(axios.get, action.payload.endpoint, {
      params: action.payload.params,
    });

    yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_ERROR', payload: error });
  }
}

export function* watchFetchData() {
  yield takeLatest(FETCH_DATA, fetchDataSaga);
}

تقوم هذه الملحمة بإجراء مكالمة API إلى ملف أكسيوس مكتبة باستخدام يتصل تأثير. ثم يرسل البيانات التي تم جلبها كحمل إجراء Redux جديد من النوع FETCH_DATA_SUCCESS. إذا حدث خطأ ، فإنه يرسل إجراء Redux جديدًا مع كائن الخطأ كحمولة وكمية من نوع FETCH_DATA_ERROR.





أخيرًا ، تحتاج إلى تسجيل Saga في متجر Redux باستخدام الوسيطة redux-saga:

ما هو وضع السكون في نظام التشغيل windows 10
 import { applyMiddleware, createStore } from 'redux'; 
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);

عن طريق تسجيل watchFetchData Saga مع مثيل البرنامج الوسيط الجديد ، ينشئ هذا الكود آخر ملحمة إعادة . يتم إعداد البرامج الوسيطة في متجر Redux باستخدام تطبيق .

يوفر Redux-Saga ، بشكل عام ، نهجًا قويًا ومتعدد الاستخدامات لإدارة الأنشطة غير المتزامنة في الداخل رد الفعل في رد الفعل التطبيقات. يمكنك تبسيط جلب البيانات وإنشاء رمز أسهل للاختبار والصيانة والتحديث باستخدام Sagas للتحكم في أخطاء التعليمات البرمجية.

مشاكل جلب البيانات الشائعة في تطبيقات React

هناك بعض الصعوبات التي يجدها المطورون كثيرًا أثناء استخدام React لجلب البيانات. وفيما يلي بعض الأمثلة على ذلك:

  1. إدارة الإجراءات غير المتزامنة: هذه هي المعلومات التي توفرها واجهة برمجة تتعقب العمليات غير المتزامنة دون التداخل مع واجهة المستخدم (UI). قد يؤدي العمل مع العديد من طلبات واجهة برمجة التطبيقات أو البيانات التي تعتمد على بيانات أخرى إلى جعل هذا الأمر صعبًا.
  2. معالجة الأخطاء: يمكن أن تفشل استدعاءات واجهة برمجة التطبيقات ، ومن الضروري أن تتعامل مع هذه الأخطاء بشكل صحيح. يتضمن ذلك تقديم رسائل خطأ للمستخدم والسماح له بإعادة إرسال الطلب.
  3. تحديث متجر Redux: يجب عليك حفظ المعلومات التي تم الحصول عليها من واجهة برمجة التطبيقات في متجر Redux حتى تتمكن المكونات الأخرى من الوصول إليها. من الضروري تحديث المتجر دون التدخل في البيانات الموجودة بالفعل أو إتلافها.

كيفية استخدام Redux-Saga لجلب البيانات في React

يتيح لك استخدام Redux-Saga لجلب البيانات فصل المنطق لإجراء استدعاءات API والتعامل مع الاستجابة من مكونات React الخاصة بك. نتيجة لذلك ، يمكنك التركيز على عرض البيانات والتفاعل مع تفاعلات المستخدم أثناء معالجة Sagas لاسترداد البيانات غير المتزامن وإدارة الأخطاء.

تحتاج إلى تسجيل watchFetchData ملحمة مع ريدوكس ساغا برمجيات وسيطة لاستخدام Sagas في متجر Redux الخاص بنا:

 // src/store.js 
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { watchFetchData } from './sagas/dataSaga';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);

export default store;

يسجل هذا الرمز ملف الملحمة مع متجر Redux باستخدام ملف تطبيق وظيفة و createSagaMiddleware طريقة ملحمة إعادة طَرد. ثم ، باستخدام ملف يجري الطريقة ، فإنه ينفذ watchFetchData قصة طويلة.

نوع USB C مقابل USB 3.0

اكتمل إعداد Redux-Saga الآن بعد أن أصبح كل مكون في مكانه. تستخدم الملحمة fetchDataApi وظيفة لجلب البيانات عندما يرسل مكون React الإجراء FETCH_DATA_REQUEST. إذا نجح جلب البيانات المجدولة ، فإنه يرسل نشاطًا آخر بالبيانات التي تم جلبها. إذا كان هناك خطأ ، فإنه يرسل إجراءً جديدًا مع كائن الخطأ.

 // src/components/DataComponent.js 

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataRequest } from '../actions/dataActions';

const DataComponent = () => {
  const dispatch = useDispatch();
  const { data, isLoading, error } = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchDataRequest({ param1: 'value1', param2: 'value2' }));
  }, [dispatch]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default DataComponent;

في المثال أعلاه ، يمكنك استخدام الامتداد useSelector ربط مكون React للحصول على البيانات ، تحميل ، و خطأ القيم من متجر Redux. يمكنك أيضًا إرسال إجراء FETCH_DATA_REQUEST باستخدام ملف خطاف useEffect () عندما يتصاعد المكون. يمكنك عرض البيانات أو رسالة التحميل أو رسالة الخطأ بناءً على ملف بيانات قيم، تحميل ، و خطأ .

من خلال الاستفادة من Redux-Saga لجلب البيانات ، إدارة طلبات API غير المتزامنة في تطبيق React قد يتم تبسيطها بشكل كبير. يمكنك إنشاء كود معياري وقابل للصيانة أكثر من خلال عزل منطق استدعاء API من المكونات الخاصة بك وإدارة التدفق غير المتزامن في Sagas.

أفضل الممارسات لاستخدام Redux-Saga لجلب البيانات

اتبع أفضل الممارسات أثناء استخدام Redux-Saga لجلب البيانات:

  1. استخدم Sagas مميزة لكل عملية جلب بيانات. يُنصح بفصل Saga لكل عملية جلب بيانات بدلاً من تضمين كل المنطق في ملحمة واحدة. يعد الحفاظ على الشفرة وتعديلها أبسط حيث يمكنك العثور على الفور على Sagas ذات الصلة لأنشطة معينة.
  2. استخدم معالجة الأخطاء المضمنة في Redux-Saga. يمكنك استخدام كتلة المحاولة / الالتقاط في Redux-Saga لمعالجة الأخطاء تلقائيًا. يتيح لنا ذلك إدارة حالات الفشل مركزيًا وتزويد المستخدمين برسائل خطأ موحدة.
  3. استخدم القصص الملحمية القابلة للإلغاء للحصول على أداء أفضل. عندما تستخدم مكون React ، يمكن أن يطلق العديد من استدعاءات API. قد تنتج حالات العرق واستدعاءات واجهة البرمجة غير الضرورية من مشغل واجهة برمجة التطبيقات هذا. من خلال إلغاء أي مكالمات جارية لواجهة برمجة التطبيقات عند تقديم طلب جديد ، يمكنك منع ذلك.
  4. استخدم أحدث البيانات. عند إجراء العديد من طلبات واجهة برمجة التطبيقات لنفس البيانات ، من الضروري التأكد من أنهم يستخدمون أحدث البيانات. باستخدام أحدث تأثير ، Redux-Saga يساعدك على تحقيق ذلك. يضمن التأثير أنك تستخدم أحدث أو أحدث مكالمات واجهة برمجة التطبيقات ويلغي أي طلبات معلقة لواجهة برمجة التطبيقات لنفس البيانات.
  5. استخدم ملفًا منفصلاً للملاحم. يجب أن تفصل Sagas عن ملف Redux store. نتيجة لذلك ، سيكون من الأسهل التحكم في Sagas واختبارها.

إحضار البيانات مع Redux-Saga

تقدم Redux-Saga طريقة موثوقة ومرنة للتعامل مع المهام غير المتزامنة في تطبيقات React. باستخدام Sagas ، يمكنك إنشاء كود أكثر قوة وقابلية للاختبار ومرونة يفصل بين الاهتمامات.

قد يكون جلب البيانات عملية صعبة ومعرضة للخطأ ، ولكن يمكنك جعلها أبسط بمساعدة Redux-Saga. تعمل Redux-Saga على تحسين تجربة المستخدم من خلال السماح لك بإدارة العديد من العمليات غير المتزامنة بشكل موثوق ومتوقع.

نظرًا لفوائدها وميزاتها العديدة ، تعد Redux-Saga إضافة رائعة إلى مجموعتك من أدوات تطوير React.