نحوه واکشی داده ها با Redux-Saga در یک برنامه React

کشف کنید که Sagas چیست و چگونه می‌تواند به شما در نوشتن کد قوی‌تر و انعطاف‌پذیر کمک کند.

React و Redux ابزارهای محبوب توسعه وب برای مدیریت وضعیت و توسعه رابط های کاربر پویا هستند.

دسترسی به اطلاعات می تواند دشوار و وقت گیر باشد، به خصوص در هنگام برخورد با رویدادهای ناهمزمان. Redux-Saga، یک بسته میان‌افزار با استفاده آسان که فعالیت‌های ناهمزمان را مدیریت می‌کند، می‌تواند این فرآیند را ساده‌تر کند.

بیاموزید که چگونه React برای ساختن برنامه ای که داده ها را از Redux-Saga بازیابی می کند، بسازید.

درک Redux-Saga

Redux-Saga یک بسته میان‌افزار است که مدیریت و آزمایش عوارض جانبی مانند دسترسی به حافظه مرورگر و درخواست‌های API ناهمزمان را ساده‌تر می‌کند. استفاده از توابع مولد باعث می شود کدهای ناهمزمان همزمان به نظر برسند و استدلال و اشکال زدایی آن را آسان تر می کند.

Redux-Saga با جستجوی اقدامات خاص Redux و راه‌اندازی Sagas کار می‌کند، که عملکردهای مولد عوارض جانبی هستند. Sagas می تواند عملیات ناهمزمان را اجرا کند، مانند به دست آوردن داده از یک API، و سپس یک اقدام Redux جدید را برای به روز رسانی وضعیت ارسال کند.

مثال استفاده از Redux-Saga برای مدیریت تماس‌های API ناهمزمان را در نظر بگیرید. با ایجاد یک عمل Redux که روند جمع آوری داده ها را آغاز می کند، شروع کنید:

export const FETCH_DATA = 'FETCH_DATA';

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

بار عملیاتی، FETCH_DATA، شامل هر پارامتر ضروری، مانند نقطه پایانی API و پارامترهای درخواست است.

سپس، یک Saga تعریف کنید که به فعالیت 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);
}

این Saga با استفاده از افکت فراخوانی با کتابخانه axios تماس API برقرار می کند. سپس داده‌های واکشی شده را به‌عنوان یک بار اقدام Redux جدید با نوع FETCH_DATA_SUCCESS ارسال می‌کند. اگر خطایی رخ دهد، یک اکشن Redux جدید با شی خطا به عنوان بار و یک نوع FETCH_DATA_ERROR ارسال می کند.

در نهایت، باید Saga را با استفاده از میان افزار redux-saga در فروشگاه Redux ثبت کنید:

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-saga دیگر ایجاد می کند. میان افزار در فروشگاه Redux با استفاده از ApplyMiddleware راه اندازی شده است.

Redux-Saga، به طور کلی، یک رویکرد قوی و همه کاره برای مدیریت فعالیت های ناهمزمان در برنامه های Redux React ارائه می دهد. با استفاده از Sagas برای کنترل اشکالات کد، می‌توانید واکشی داده‌ها را ساده کنید و کد آسان‌تری برای آزمایش، نگهداری و به‌روزرسانی تولید کنید.

مشکلات رایج واکشی داده در برنامه های React

در هنگام استفاده از واکشی داده‌های React، توسعه‌دهندگان با مشکلاتی مواجه می‌شوند. در اینجا چند نمونه هستند:

1. مدیریت اقدامات ناهمزمان: این اطلاعاتی است که توسط یک رابط برنامه نویسی ارائه می شود که بدون تداخل با رابط کاربری (UI) عملیات غیرهمزمان را پیگیری می کند. کار با چندین درخواست API یا داده‌ای که به داده‌های دیگر وابسته است ممکن است این کار را دشوار کند.
2. رسیدگی به خطاها: تماس‌های API ممکن است با شکست مواجه شوند، و بسیار مهم است که این خطاها را به درستی مدیریت کنید. این شامل ارائه پیام های خطا به کاربر و اجازه دادن به آنها برای ارسال مجدد درخواست است.
3. به روز رسانی فروشگاه Redux: باید اطلاعات به دست آمده از یک API را در فروشگاه Redux ذخیره کنید تا سایر اجزا بتوانند به آن دسترسی داشته باشند. به روز رسانی فروشگاه بدون تداخل یا خراب کردن داده های موجود بسیار مهم است.

نحوه استفاده از Redux-Saga برای واکشی داده در React

استفاده از Redux-Saga برای واکشی داده‌ها به شما امکان می‌دهد منطق برقراری تماس‌های API و برخورد با پاسخ را از اجزای React خود جدا کنید. در نتیجه، می‌توانید روی رندر کردن داده‌ها و واکنش به تعاملات کاربر تمرکز کنید در حالی که Sagas بازیابی ناهمزمان داده و مدیریت خطا را مدیریت می‌کند.

برای استفاده از Sagas در فروشگاه Redux ما باید WatchFetchData Saga را با میان افزار Redux-Saga ثبت کنید:

// 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;

این کد با استفاده از تابع applicationMiddleware و متد createSagaMiddleware بسته redux-saga، sagaMiddleware را در فروشگاه Redux ثبت می کند. سپس با استفاده از روش run، watchFetchData Saga را اجرا می کند.

راه اندازی Redux-Saga شما اکنون که هر جزء در جای خود قرار دارد کامل شده است. هنگامی که مؤلفه React شما اقدام FETCH_DATA_REQUEST را ارسال می کند، Saga از تابع fetchDataApi برای واکشی داده ها استفاده می کند. اگر واکشی زمان‌بندی‌شده داده با موفقیت انجام شود، فعالیت دیگری را با داده‌های واکشی شده ارسال می‌کند. اگر خطایی وجود داشته باشد، یک اکشن جدید با شی خطا ارسال می کند.

// 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 خود برای دریافت داده ها، isLoading و مقادیر خطا از فروشگاه Redux استفاده می کنید. علاوه بر این، هنگام نصب مؤلفه، عمل FETCH_DATA_REQUEST را با استفاده از قلاب useEffect() ارسال می کنید. بسته به مقادیر داده، isLoading و خطا، داده، پیام بارگیری یا پیام خطا را ارائه می دهید.

با استفاده از Redux-Saga برای واکشی داده ها، مدیریت درخواست های API ناهمزمان در برنامه React ممکن است به طور قابل توجهی ساده شود. می توانید با جداسازی منطق فراخوانی API از اجزای خود و مدیریت جریان ناهمزمان در Sagas، کد قابل نگهداری و ماژولار بیشتری ایجاد کنید.

بهترین روش ها برای استفاده از Redux-Saga برای واکشی داده ها

هنگام استفاده از Redux-Saga برای واکشی داده، این بهترین شیوه ها را دنبال کنید:

1. برای هر عملیات واکشی داده از Sagaهای مجزا استفاده کنید. توصیه می شود برای هر فرآیند واکشی داده، یک Saga را جدا کنید تا اینکه همه منطق را در یک حماسه قرار دهید. حفظ و تغییر کد ساده‌تر است زیرا می‌توانید فوراً Sagas مربوطه را برای فعالیت‌های خاص پیدا کنید.
2. از مدیریت خطای داخلی Redux-Saga استفاده کنید. می توانید از بلوک try/catch Redux-Saga برای مدیریت خودکار خطاها استفاده کنید. این به ما اجازه می دهد تا خرابی ها را به صورت متمرکز مدیریت کنیم و پیام های خطای یکسانی را در اختیار کاربران قرار دهیم.
3. برای عملکرد بهتر از ساگا های قابل لغو استفاده کنید. هنگامی که از یک جزء React استفاده می کنید، می تواند بسیاری از تماس های API را راه اندازی کند. موقعیت‌های مسابقه و تماس‌های غیرضروری رابط برنامه‌نویسی ممکن است از این راه‌انداز API ناشی شوند. با لغو هر تماس API در حال انجام در هنگام درخواست جدید، می توانید از این امر جلوگیری کنید.
4. از جدیدترین داده ها استفاده کنید. هنگام ایجاد چندین درخواست API برای یک داده، بسیار مهم است که اطمینان حاصل شود که آنها از جدیدترین داده ها استفاده می کنند. با استفاده از آخرین افکت، Redux-Saga به شما کمک می کند تا به این هدف برسید. این اثر تضمین می‌کند که از آخرین یا جدیدترین تماس‌های API استفاده می‌کنید و درخواست‌های API معلق برای همان داده‌ها را لغو می‌کند.
5. از یک فایل جداگانه برای حماسه استفاده کنید. شما باید Sagas را جدا از فایل فروشگاه Redux نگه دارید. در نتیجه، Sagas شما برای کنترل و آزمایش آسان تر خواهد بود.

واکشی داده با Redux-Saga

Redux-Saga یک روش قابل اعتماد و انعطاف پذیر برای رسیدگی به وظایف ناهمزمان در برنامه های React ارائه می دهد. با استفاده از Sagas، می‌توانید کد قوی‌تر، قابل آزمایش و انعطاف‌پذیرتری ایجاد کنید که نگرانی‌ها را از هم جدا می‌کند.

واکشی داده ها می تواند یک عملیات دشوار و مستعد خطا باشد، اما می توانید با کمک Redux-Saga آن را ساده تر کنید. Redux-Saga با امکان مدیریت قابل اعتماد و قابل پیش بینی بسیاری از فرآیندهای ناهمزمان، تجربه کاربر را بهبود می بخشد.

Redux-Saga به دلیل مزایا و ویژگی‌های فراوانی که دارد، افزودنی فوق‌العاده به مجموعه ابزارهای توسعه React شما است.

منبع مقاله