Redux-da slaysdan ma'lumotlarni qayta-qayta ishlatish

O‘tgan darsda biz mahsulot qo‘shish uchun forma yana bir maydoncha bilan to‘ldirdik – uni joylashtiruvchi sotuvchini tanlash uchun ochiladigan ro‘yxat. Faraz qilaylik, endi bu ma’lumotni ilovaning yana bir nechta joylarida chiqarishimiz kerak. Buning uchun har safar kodni takrorlamaymiz, balki shunchaki alohida komponent yaratamiz, unda slaysdan ma’lumotlarni olamiz va kerakli joylarda chiqaramiz.

Mahsulotlar ilovamizni ochamiz. Keling, endi products papkasida yana bir fayl SellerOfProd.jsx yaratamiz. Boshlanish uchun useSelector gukini import qilamiz, uning yordamida biz kerakli mahsulot slaysini olamiz:

import { useSelector } from 'react-redux'

Keyin store’dan kerakli mahsulotni sotuvchi id si bo‘yicha olamiz, uni yangi komponentimizga props lar orqali uzatamiz:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Agar bunday sotuvchi mavjud bo‘lsa, uning nomini qaytaramiz, aks holda 'unknown' qaytaramiz:

return <span>by {seller ? seller.name : 'unknown'}</span>

Keling, endi yangi komponentimizni ProductsList.jsx ga import qilaylik va ProductsList funksiyasiga mahsulot nomi bilan sarlavhadan keyin joylaymiz. Ko‘rib turganingizdek, biz unga props orqali id ni uzatdik:

<SellerOfProd sellerId={product.seller} />

Endi, agar ilovamizni ishga tushirsak, yangi mahsulot qo‘shsak va uni ro‘yxatdan topsak, uning sotuvchisi paydo bo‘lganini ko‘ramiz, ilovani ishga tushirishda avtomatik qo‘shilgan mahsulotlarda esa 'unknown' bo‘ladi.

Kichik tafsilot: agar sizning VS Code editoringizdagi eslint sellerId haqida shikoyat qilsa, lekin ilova ishlasa, buni hozircha e‘tiborsiz qoldirishingiz mumkin yoki ilovingizning .eslintrc.cjs faylini ochib, rules qismiga "react/prop-types": "off" qo‘shing.

Tabiiyki, biz sotuvchi haqidagi ma’lumotni mahsulot sahifasiga ham qo‘shmoqchimiz. Buning uchun ProductPage verstalkasiga mahsulot nomi bilan sarlavhadan keyin yana shu qatorni qo‘shamiz va hammasi ishlashini tekshiramiz:

<SellerOfProd sellerId={product.seller} />

Talabalar ilovangizni oching. Dars mavzusini o‘rganib, students papkasida TeacherForStudent komponenti uchun fayl yarating. Natijada komponent o‘qituvchining FIO sini qaytarishi kerak, yoniga qavs ichida uning o‘qitadigan fani. Kerakli o‘qituvchini useSelector guki yordamida toping. Agar ushbu talaba uchun o‘qituvchi mavjud bo‘lmasa, 'anonym' chiqaring.

Oldingi vazifadan olingan komponent yordamida har bir talaba uchun o‘qituvchi ma’lumotlarini talabalar ro‘yxati sahifasida chiqaring.

Oldingi vazifadagi narsani, lekin alohida talaba sahifasi uchun bajaring.