כיצד להביא נתונים ב-React באמצעות שאילתת Redux Toolkit

React היא ספריית JavaScript פופולרית לבניית ממשקי משתמש עבור יישומי אינטרנט. בעת בניית אפליקציה, חשוב לשקול גישת ניהול נתונים יעילה כדי להבטיח שתשלוף ומעבד נתונים בדפדפן בצורה מתאימה, בתגובה לאינטראקציות של משתמשים.

עם זאת, ניהול תהליך זה עשוי להפוך לכאורה למשימה מייגעת ונוטה לשגיאות, במיוחד אם אתה מביא נתונים ממספר מקורות, ואתה צריך לעדכן באופן עקבי מספר מצבים. במקרים כאלה, Redux Toolkit Query מספק פתרון יעיל.

שאילתת Redux Toolkit (RTK Query) הוא כלי לאיפת נתונים שנבנה על גבי ערכת הכלים של Redux. התיעוד הרשמי שלה מתאר את RTK Query כ"כלי רב עוצמה לאיסוף נתונים ושמירת מטמון שנועד לפשט מקרים נפוצים לטעינת נתונים ביישום אינטרנט, תוך ביטול הצורך בכתיבה ידנית של היגיון של אחזור ואחסון במטמון עַצמְךָ".

בעיקרו של דבר, הוא מספק קבוצה של תכונות ויכולות המייעלות את תהליך האחזור והניהול של נתונים ממשקי API או כל מקור נתונים אחר מאפליקציית React.

בעוד שיש קווי דמיון בין Redux Toolkit Query ל-React Query, יתרון עיקרי אחד של Redux Toolkit Query הוא האינטגרציה החלקה שלה עם

Redux, ספריית ניהול מדינה, המאפשר פתרון מלא לאיסוף נתונים וניהול מצב עבור יישומי React בשימוש יחד.

חלק מתכונות הליבה של RTK כוללות אחסון נתונים במטמון, תכונת ניהול שאילתות וטיפול בשגיאות.

כדי להתחיל, אתה יכול ליצור במהירות פרויקט React באופן מקומי באמצעות צור אפליקציית React פקודה.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
התחלה של npm

לחילופין, אתה יכול הגדר פרויקט React באמצעות Vite, כלי בנייה חדש ושרת פיתוח עבור יישומי אינטרנט.

אתה יכול למצוא את הקוד של הפרויקט הזה בזה מאגר GitHub.

התקן את התלות הנדרשות

לאחר שתפעיל את פרויקט React שלך, המשך והתקן את החבילות הבאות.

npm התקן את @reduxjs/toolkit react-redux

הגדר פרוסת API

פרוסת API היא רכיב הכולל את הלוגיקה הנחוצה של Redux לשילוב עם נקודות קצה מוגדרות של API ואינטראקציה איתם. הוא מספק דרך סטנדרטית להגדיר הן נקודות קצה של שאילתה להבאת נתונים והן נקודות קצה של מוטציה לשינוי הנתונים.

בעיקרו של דבר, פרוסת API מאפשרת לך להגדיר את נקודות הקצה לבקשת וביצוע שינויים בנתונים ממקור מסוים, ומספקת גישה יעילה לשילוב עם ממשקי API.

בתוך ה src ספרייה, צור תיקיה חדשה ושמה לה, מאפיינים. בתוך תיקיה זו, צור קובץ חדש: apiSlice.js, והוסיפו את הקוד למטה:

יְבוּא { createApi, fetchBaseQuery } מ"@reduxjs/toolkit/query/react";
יְצוּאconst productsApi = createApi({
 מפחית נתיב: "מוצרים אפ",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 נקודות קצה: (בּוֹנֶה) => ({
 getAllProducts: builder.query({
 שאילתא: () =>"מוצרים",
 }),
 getProduct: builder.query({
 שאילתא: (מוצר) =>`מוצרים/חיפוש? q=${product}`, 
 }),
 }),
});
יְצוּאconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

קוד זה מגדיר פרוסת API הנקראת מוצריםApi באמצעות Redux Toolkit createApi פוּנקצִיָה. פרוסת ה-API מקבלת את המאפיינים הבאים:

• א מפחית נתיב property - מגדיר את שם המפחית בחנות Redux.
• ה baseQuery מאפיין - מציין את כתובת האתר הבסיסית עבור כל בקשות ה-API המשתמשות ב- fetchBaseQuery פונקציה מסופקת על ידי Redux Toolkit.
• ממשק API נקודות קצה - ציין את נקודות הקצה הזמינות עבור פרוסת API זו באמצעות ה- בּוֹנֶה לְהִתְנַגֵד. במקרה זה, הקוד מגדיר שתי נקודות קצה.

לבסוף, שני ווים נוצרים מה מוצרים API אובייקט שמזהה את שתי נקודות הקצה. אתה יכול להשתמש ב-hooks אלה ברכיבי React שונים כדי לבצע בקשות API, לאחזר נתונים ולשנות את המצב בתגובה לאינטראקציה של המשתמש.

גישה זו מייעלת את ניהול המדינה ואחזור הנתונים באפליקציית React.

הגדר את חנות Redux

לאחר שליפת הנתונים מה-API, RTK Query שומרת את הנתונים במטמון בחנות Redux. החנות, במקרה זה, משמשת כמרכז מרכזי לניהול מצב בקשות ה-API שנעשו מה-React יישום, לרבות הנתונים שאוחזרו מאותן בקשות API המבטיחות לרכיבים גישה ועדכון נתונים אלה כ נָחוּץ.

בספריית src, צור א store.js קובץ והוסף את שורות הקוד הבאות:

יְבוּא { configureStore } מ"@reduxjs/ערכת כלים";
יְבוּא { productsApi } מ"./features/apiSlice";
יְצוּאconst store = configureStore({
 מפחית: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 תוכנת ביניים: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

קוד זה יוצר חנות Redux חדשה, עם שני חלקי תצורה עיקריים:

1. מפחית: זה מגדיר כיצד החנות צריכה לטפל בעדכונים למדינה. במקרה זה, ה productsApi.reducer מועבר כפונקציית המפחית וניתן למפתח reducerPath ייחודי לזהות אותו במצב הכולל של החנות.
2. כלי ביניים: זה מגדיר כל תוכנת ביניים נוספת שאמורה לחול על החנות.

המתקבל חנות object היא חנות Redux בעלת תצורה מלאה, שבה ניתן להשתמש כדי לנהל את מצב האפליקציה.

על ידי הגדרת החנות בצורה זו, האפליקציה יכולה לנהל בקלות את מצב בקשות ה-API, ולעבד את התוצאות שלהן בצורה סטנדרטית באמצעות Redux Toolkit.

צור רכיב ליישום פונקציונליות RTK

בספריית src, צור חדש רכיבים תיקייה עם קובץ חדש בפנים: Data.js.

הוסף את הקוד הזה לקובץ Data.js:

יְבוּא { useGetAllProductsQuery } מ"../features/apiSlice";
יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא"./product.component.css";
יְצוּאconst נתונים = () => {
const { data, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);
const handleDisplayData = () => {
 retch();
 setProductsData (נתונים?.מוצרים);
 };
לַחֲזוֹר (
"מיכל מוצר">
"כפתור מוצר" onClick={handleDisplayData}>
 נתוני תצוגה
 </button>
 {טוען && <div>טוען...div>}
 {שגיאה && <div>שגיאה: {error.message}div>}
"תווית מוצר">מוצרים:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).מַפָּה((מוצר) => (
"פרטי מוצר" key={product.id}>
שם: {product.title}</p>

תיאור: {product.description}</p>

מחיר: {product.price}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

קוד זה מדגים רכיב React שמשתמש בהוק useGetAllProductsQuery שסופק על ידי פרוסת ה-API כדי לאחזר נתונים מנקודת הקצה של ה-API שצוינה.

כאשר המשתמש לוחץ על כפתור הצג נתונים, הפונקציה handleDisplayData מופעלת, ושולחת בקשת HTTP ל-API כדי לאחזר נתוני מוצר. לאחר קבלת התגובה, משתנה הנתונים של המוצרים מתעדכן בנתוני התגובה. לבסוף, הרכיב מציג רשימה של פרטי מוצר.

עדכן את רכיב האפליקציה

בצע את השינויים הבאים בקוד בקובץ App.js:

יְבוּא"./App.css";
יְבוּא { נתונים } מ"./components/Data";
יְבוּא { חנות } מ"./חנות";
יְבוּא { ספק } מ"react-redux";
יְבוּא { ApiProvider } מ"@reduxjs/toolkit/query/react";
יְבוּא { productsApi } מ"./features/apiSlice";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


"אפליקציה">

 </div>
 </ApiProvider>
 </Provider>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה עוטף את רכיב הנתונים עם שני ספקים. שני הספקים הללו מעניקים לרכיב גישה לחנות Redux ולתכונות שאילתות RTK המאפשרות לו להביא ולהציג נתונים מהממשק ה-API.

קל להגדיר את Redux Toolkit Query כדי לאחזר ביעילות נתונים ממקור מסוים עם קוד מינימלי. יתר על כן, אתה יכול גם לשלב פונקציות לשינוי נתונים מאוחסנים על ידי הגדרת נקודות קצה של מוטציה ברכיב פרוסת ה-API.

על ידי שילוב התכונות של Redux עם יכולות שליפת הנתונים של RTK, אתה יכול להשיג פתרון ניהול מצב מקיף עבור יישומי האינטרנט שלך React.