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

Redux Toolkit Query می تواند درد بسیاری از کارهای مدیریت داده شما را کم کند. کشف کنید که چگونه.

React یک کتابخانه محبوب جاوا اسکریپت برای ایجاد رابط کاربری برای برنامه های کاربردی وب است. هنگام ساختن یک برنامه کاربردی، مهم است که یک رویکرد مدیریت داده کارآمد را در نظر بگیرید تا اطمینان حاصل شود که در پاسخ به تعاملات کاربر، داده ها را در مرورگر به طور مناسب واکشی و ارائه می کنید.

با این حال، به‌نظر می‌رسد که مدیریت این فرآیند می‌تواند به یک کار خسته‌کننده و مستعد خطا تبدیل شود، به‌خصوص اگر داده‌ها را از منابع متعدد واکشی می‌کنید، و باید به‌طور مداوم تعدادی از وضعیت‌ها را به‌روزرسانی کنید. در چنین مواردی Redux Toolkit Query یک راه حل کارآمد ارائه می دهد.

Redux Toolkit Query چیست؟

Redux Toolkit Query (RTK Query) یک ابزار واکشی داده است که در بالای جعبه ابزار Redux ساخته شده است. اسناد رسمی آن RTK Query را به عنوان “ابزار واکشی و ذخیره سازی داده های قدرتمندی که برای ساده کردن موارد رایج برای بارگذاری داده ها در یک برنامه وب طراحی شده است، و نیاز به نوشتن دستی واکشی داده ها و منطق ذخیره سازی را از بین می برد” توصیف می کند.

اساساً مجموعه‌ای از ویژگی‌ها و قابلیت‌هایی را ارائه می‌کند که فرآیند واکشی و مدیریت داده‌ها را از API یا هر منبع داده دیگری از یک برنامه React ساده می‌کند.

در حالی که شباهت‌هایی بین Redux Toolkit Query و React Query وجود دارد، یکی از مزیت‌های اصلی Redux Toolkit Query ادغام یکپارچه آن با Redux، یک کتابخانه مدیریت دولتی است که امکان واکشی کامل داده و راه‌حل مدیریت وضعیت را برای برنامه‌های React در صورت استفاده با هم فراهم می‌کند.

برخی از ویژگی‌های اصلی RTK شامل ذخیره‌سازی داده، ویژگی مدیریت پرس و جو و مدیریت خطا است.

شروع به کار با Redux Toolkit Query در یک React Application

برای شروع، می‌توانید با استفاده از دستور Create React App، پروژه React را به‌سرعت به‌صورت محلی بچرخانید.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
npm start

از طرف دیگر، می‌توانید با استفاده از Vite، یک ابزار ساخت جدید و سرور توسعه برنامه‌های وب، یک پروژه React راه‌اندازی کنید.

می توانید کد این پروژه را در این مخزن GitHub پیدا کنید.

Required Dependencies را نصب کنید

هنگامی که پروژه React خود را راه اندازی و اجرا کردید، ادامه دهید و بسته های زیر را نصب کنید.

npm install @reduxjs/toolkit react-redux

یک API Slice را تعریف کنید

یک قطعه API مؤلفه ای است که شامل منطق Redux لازم برای ادغام و تعامل با نقاط انتهایی مشخص شده API است. این یک راه استاندارد برای تعریف هر دو نقطه پایانی پرس و جو برای واکشی داده ها و نقاط پایانی جهش برای اصلاح داده ها ارائه می دهد.

اساساً، یک برش API به شما امکان می دهد نقاط پایانی را برای درخواست و ایجاد تغییرات در داده ها از یک منبع خاص تعریف کنید، و یک رویکرد ساده برای یکپارچه سازی با API ها ارائه می دهد.

در دایرکتوری src، یک پوشه جدید ایجاد کنید و نام آن را ویژگی ها بگذارید. در داخل این پوشه، یک فایل جدید ایجاد کنید: apiSlice.js و کد زیر را اضافه کنید:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),

  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});

export const { useGetAllProductsQuery , useGetProductQuery } = productsApi;

این کد یک قطعه API به نام productsApi را با استفاده از تابع createApi Redux Toolkit تعریف می کند. برش API دارای ویژگی های زیر است:

• یک ویژگی reducerPath – نام کاهش دهنده را در فروشگاه Redux تنظیم می کند.
• ویژگی baseQuery – URL پایه را برای تمام درخواست های API با استفاده از تابع fetchBaseQuery ارائه شده توسط Redux Toolkit مشخص می کند.
• نقاط پایانی API – با استفاده از شی سازنده، نقاط پایانی موجود را برای این برش API مشخص کنید. در این حالت کد دو نقطه پایانی را تعریف می کند.

در نهایت، دو قلاب از شی productAPI تولید می شود که دو نقطه پایانی را مشخص می کند. می‌توانید از این هوک‌ها در اجزای مختلف React برای درخواست‌های API، بازیابی داده‌ها و تغییر وضعیت در پاسخ به تعامل کاربر استفاده کنید.

این رویکرد مدیریت حالت و واکشی داده ها را در برنامه React ساده می کند.

فروشگاه Redux را پیکربندی کنید

پس از واکشی داده ها از API، RTK Query داده ها را در فروشگاه Redux ذخیره می کند. در این مورد، فروشگاه به‌عنوان یک مرکز مرکزی برای مدیریت وضعیت درخواست‌های API ارائه‌شده از برنامه React، از جمله داده‌های بازیابی شده از آن درخواست‌های API عمل می‌کند که اطمینان حاصل می‌کند که مؤلفه‌ها به این داده‌ها دسترسی دارند و در صورت نیاز به‌روزرسانی می‌شوند.

در پوشه src، یک فایل store.js ایجاد کنید و خطوط کد زیر را اضافه کنید:

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";

export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
});

این کد یک فروشگاه Redux جدید با دو قسمت اصلی پیکربندی ایجاد می کند:

1. Reducer: این نشان می دهد که فروشگاه چگونه باید به روز رسانی های ایالت را مدیریت کند. در این حالت، productsApi.reducer به عنوان تابع کاهنده ارسال می‌شود و یک کلید ReducerPath منحصربه‌فرد برای شناسایی آن در حالت کلی فروشگاه به آن داده می‌شود.
2. Middleware: هر میان افزار اضافی را که باید برای فروشگاه اعمال شود، تعریف می کند.

شی فروشگاه به دست آمده یک فروشگاه Redux کاملاً پیکربندی شده است که می تواند برای مدیریت وضعیت برنامه استفاده شود.

با پیکربندی فروشگاه به این روش، برنامه به راحتی می‌تواند وضعیت درخواست‌های API را مدیریت کند و نتایج آن‌ها را به روشی استاندارد با استفاده از Redux Toolkit پردازش کند.

یک مؤلفه برای پیاده سازی عملکرد RTK ایجاد کنید

در پوشه src، یک پوشه اجزای جدید با یک فایل جدید در داخل ایجاد کنید: Data.js.

این کد را به فایل Data.js اضافه کنید:

import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";

export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);

  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };

  return (
    <div className="product-container">
      <button className="product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      <label className="product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        <ul>
          {productsData.slice(0, 4).map((product) => (
            <li className="product-details" key={product.id}>
              <p>Name: {product.title}</p>
              <p>Description: {product.description}</p>
              <p>Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

این کد یک مؤلفه React را نشان می دهد که از قلاب useGetAllProductsQuery ارائه شده توسط قطعه API برای بازیابی داده ها از نقطه پایانی API مشخص شده استفاده می کند.

هنگامی که کاربر روی دکمه Display Data کلیک می کند، تابع handleDisplayData اجرا می شود و یک درخواست HTTP برای بازیابی اطلاعات محصول به API ارسال می کند. پس از دریافت پاسخ، متغیر داده محصولات با داده های پاسخ به روز می شود. در نهایت، جزء لیستی از جزئیات محصول را ارائه می دهد.

کامپوننت برنامه را به روز کنید

تغییرات زیر را در کد موجود در فایل App.js اعمال کنید:

import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";

function App() {
  return (
    <Provider store={store}>
      <ApiProvider api={productsApi}>
        <div className="App">
          <Data />
        </div>
      </ApiProvider>
    </Provider>
  );
}

export default App;

این کد کامپوننت Data را با دو ارائه دهنده بسته بندی می کند. این دو ارائه‌دهنده به کامپوننت اجازه دسترسی به فروشگاه Redux و ویژگی‌های RTK Query را می‌دهند که به آن امکان می‌دهد داده‌ها را از API واکشی و نمایش دهد.

استفاده از Redux Toolkit Query در برنامه های کاربردی وب

پیکربندی Redux Toolkit Query برای بازیابی موثر داده ها از یک منبع مشخص با حداقل کد آسان است. علاوه بر این، شما همچنین می توانید توابعی را برای اصلاح داده های ذخیره شده با تعریف نقاط پایانی جهش در جزء برش API ترکیب کنید.

با ترکیب ویژگی های Redux با توانایی های واکشی داده RTK، می توانید یک راه حل جامع مدیریت وضعیت برای برنامه های وب React خود به دست آورید.

منبع مقاله