يمكن لاستعلام مجموعة أدوات Redux Toolkit أن يخفف عنك الكثير من أعمال إدارة البيانات الخاصة بك. اكتشف كيف.
React هي مكتبة JavaScript شائعة لبناء واجهات مستخدم لتطبيقات الويب. عند إنشاء تطبيق ، من المهم التفكير في نهج فعال لإدارة البيانات لضمان جلب البيانات وعرضها في المتصفح بشكل مناسب ، استجابة لتفاعلات المستخدم.
ومع ذلك ، يمكن أن تصبح إدارة هذه العملية على ما يبدو مهمة شاقة ومعرضة للأخطاء خاصة إذا كنت تجلب البيانات من مصادر متعددة ، وتحتاج إلى تحديث عدد من الحالات باستمرار. في مثل هذه الحالات ، يوفر استعلام مجموعة أدوات Redux حلاً فعالاً.
استعلام مجموعة أدوات الإحياء (RTK Query) هي أداة لجلب البيانات مبنية على مجموعة أدوات Redux. تصف وثائقه الرسمية استعلام RTK بأنه "أداة قوية لجلب البيانات والتخزين المؤقت مصممة للتبسيط الحالات الشائعة لتحميل البيانات في تطبيق ويب ، مما يلغي الحاجة إلى الكتابة اليدوية لجلب البيانات ومنطق التخزين المؤقت نفسك".
بشكل أساسي ، يوفر مجموعة من الميزات والإمكانيات التي تبسط عملية جلب البيانات وإدارتها من واجهات برمجة التطبيقات أو أي مصدر بيانات آخر من تطبيق React.
في حين أن هناك أوجه تشابه بين استعلام مجموعة أدوات Redux و React Query ، فإن إحدى الميزات الرئيسية لـ Redux Toolkit Query هي تكاملها السلس مع
Redux ، مكتبة إدارة الدولة، مما يسمح بجلب البيانات الكامل وحل إدارة الحالة لتطبيقات React عند استخدامها معًا.تتضمن بعض الميزات الأساسية لـ RTK التخزين المؤقت للبيانات وميزة إدارة الاستعلام ومعالجة الأخطاء.
للبدء ، يمكنك إنشاء مشروع React سريعًا محليًا باستخدام امتداد أنشئ تطبيق React يأمر.
mkdir رد فعل RTQ
cd React-RTQ
npx إنشاء-رد فعل-التطبيق رد فعل- rtq- مثال
cd رد فعل- rtq- مثال
بدء npm
بدلا من ذلك ، يمكنك قم بإعداد مشروع React باستخدام Vite، أداة بناء جديدة وخادم تطوير لتطبيقات الويب.
يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.
قم بتثبيت التبعيات المطلوبة
بمجرد تشغيل مشروع React وتشغيله ، امض قدمًا وقم بتثبيت الحزم التالية.
npm install @ reduxjs / toolkit رد فعل-redux
تحديد شريحة API
شريحة API هي مكون يتضمن منطق Redux الضروري للتكامل مع نقاط نهاية API المحددة والتفاعل معها. يوفر طريقة موحدة لتحديد كل من نقاط نهاية الاستعلام لجلب البيانات ونقاط نهاية الطفرة لتعديل البيانات.
بشكل أساسي ، تتيح لك شريحة واجهة برمجة التطبيقات تحديد نقاط النهاية لطلب وإجراء تغييرات على البيانات من مصدر معين ، مما يوفر نهجًا مبسطًا للتكامل مع واجهات برمجة التطبيقات.
في ال src الدليل ، قم بإنشاء مجلد جديد وقم بتسميته ، سمات. داخل هذا المجلد ، قم بإنشاء ملف جديد: apiSlice.js، وأضف الرمز أدناه:
يستورد {createApi، fetchBaseQuery} من"@ reduxjs / مجموعة الأدوات / استعلام / رد فعل";
يصدّرمقدار ثابت productsApi = createApi ({
المخفض "productsAp",
baseQuery: fetchBaseQuery ({ قاعدة: " https://dummyjson.com/" }),نقاط النهاية: (باني) => ({
getAllProducts: builder.query ({
استفسار: () =>"منتجات",
}),
getProduct: builder.query ({
استفسار: (منتج) =>المنتجات / البحث؟ ف =$ {product}`,
}),
}),
});
يصدّرمقدار ثابت {useGetAllProductsQuery، useGetProductQuery} = productsApi؛
يحدد هذا الرمز شريحة API تسمى المنتجات باستخدام مجموعة أدوات Redux createApi وظيفة. تأخذ شريحة API الخصائص التالية:
- أ المخفض الخاصية - يحدد اسم المخفض في متجر Redux.
- ال BaseQuery الخاصية - تحدد عنوان URL الأساسي لجميع طلبات واجهة برمجة التطبيقات باستخدام امتداد fetchBaseQuery الوظيفة التي يوفرها Redux Toolkit.
- API نقاط النهاية - حدد نقاط النهاية المتاحة لشريحة API هذه باستخدام امتداد باني هدف. في هذه الحالة ، يحدد الكود نقطتي نهاية.
أخيرًا ، يتم إنشاء خطافين من ملف المنتجات الذي يحدد نقطتي النهاية. يمكنك استخدام هذه الخطافات في مكونات React المختلفة لعمل طلبات API واسترداد البيانات وتغيير الحالة استجابةً لتفاعل المستخدم.
يبسط هذا النهج إدارة الحالة وجلب البيانات في تطبيق React.
تكوين متجر Redux
بعد جلب البيانات من API ، يقوم RTK Query بتخزين البيانات مؤقتًا في متجر Redux. يعمل المتجر ، في هذه الحالة ، كمحور مركزي لإدارة حالة طلبات واجهة برمجة التطبيقات التي يتم إجراؤها من React التطبيق ، بما في ذلك البيانات المسترجعة من طلبات واجهة برمجة التطبيقات (API) لضمان الوصول إلى المكونات وتحديث هذه البيانات كـ ضروري.
في دليل src ، أنشئ ملف store.js ملف وإضافة سطور التعليمات البرمجية التالية:
يستورد {configStore} من"@ reduxjs / مجموعة الأدوات";
يستورد {productsApi} من"./features/apiSlice";
يصدّرمقدار ثابت مخزن = configStore ({
المخفض: {
[productsApi.reducerPath]: productsApi.reducer ،
},
الوسيطة: (getDefaultMiddleware) =>
getDefaultMiddleware (). concat (productsApi.middleware) ،
});
ينشئ هذا الرمز متجر Redux جديدًا ، مع جزأين رئيسيين من التكوين:
- المخفض: هذا يحدد كيف يجب أن يتعامل المتجر مع تحديثات الحالة. في هذه الحالة ، فإن ملف المنتجات يتم تمريره كوظيفة مخفض ويتم منحه مفتاح مخفض فريد من نوعه لتحديده ضمن الحالة العامة للمخزن.
- الوسيطة: يحدد هذا أي برمجيات وسيطة إضافية يجب أن تنطبق على المتجر.
النتيجة محل الكائن عبارة عن متجر Redux مهيأ بالكامل ، والذي يمكن استخدامه لإدارة حالة التطبيق.
من خلال تكوين المتجر بهذه الطريقة ، يمكن للتطبيق بسهولة إدارة حالة طلبات واجهة برمجة التطبيقات ومعالجة نتائجها بطريقة موحدة باستخدام مجموعة أدوات Redux.
قم بإنشاء مكون لتنفيذ وظيفة RTK
في دليل src ، أنشئ ملف عناصر مجلد بملف جديد بداخله: Data.js.
أضف هذا الرمز إلى ملف Data.js:
يستورد {useGetAllProductsQuery} من"../features/apiSlice";
يستورد رد فعل ، {useState} من"تتفاعل";
يستورد"./product.component.css";يصدّرمقدار ثابت البيانات = () => {
مقدار ثابت {data، error، isLoading، refetch} = useGetAllProductsQuery ()؛
مقدار ثابت [productsData، setProductsData] = useState ([]) ؛مقدار ثابت handleDisplayData = () => {
إعادة إحضار () ؛
setProductsData (data؟ .products) ؛
};
يعود (
"حاوية المنتج">
يوضح هذا الرمز مكون React الذي يستخدم الخطاف useGetAllProductsQuery الذي توفره شريحة API لاسترداد البيانات من نقطة نهاية API المحددة.
عندما ينقر المستخدم على زر عرض البيانات ، يتم تنفيذ وظيفة handleDisplayData ، وإرسال طلب HTTP إلى واجهة برمجة التطبيقات لاسترداد بيانات المنتج. بمجرد تلقي الاستجابة ، يتم تحديث متغير بيانات المنتجات ببيانات الاستجابة. أخيرًا ، يعرض المكون قائمة بتفاصيل المنتج.
قم بتحديث مكون التطبيق
قم بإجراء التغييرات التالية على الرمز الموجود في ملف App.js:
يستورد"./App.css";
يستورد { بيانات } من"./components/Data";
يستورد { محل } من"./محل";
يستورد { مزود } من"رد فعل - إعادة";
يستورد {ApiProvider} من"@ reduxjs / مجموعة الأدوات / استعلام / رد فعل";
يستورد {productsApi} من"./features/apiSlice";وظيفةبرنامج() {
يعود ( "برنامج">
</div>
</ApiProvider>
</Provider>
);
}
يصدّرتقصير برنامج؛
هذا الرمز يلتف مكون البيانات مع اثنين من الموفرين. يمنح هذان المزودان وصول المكون إلى متجر Redux وميزات RTK Query مما يسمح له بجلب البيانات وعرضها من واجهة برمجة التطبيقات.
من السهل تكوين Redux Toolkit Query لاسترداد البيانات بكفاءة من مصدر محدد بأقل كود ممكن. علاوة على ذلك ، يمكنك أيضًا دمج وظائف لتعديل البيانات المخزنة عن طريق تحديد نقاط نهاية الطفرة في مكون شريحة API.
من خلال الجمع بين ميزات Redux وقدرات RTK على جلب البيانات ، يمكنك الحصول على حل شامل لإدارة الحالة لتطبيقات الويب React الخاصة بك.