Redux-də slice-dan məlumatların çoxsaylı istifadəsi

Keçən dərsdə biz məhsul əlavə etmək üçün formaya onu yerləşdirən satıcını seçmək üçün açılan siyahı ilə başqa bir sahə əlavə etdik. Fərz edək ki, indi biz bu məlumatı proqramın daha bir neçə yerində çıxarmaq məcburiyyətindəyik. Bunun üçün biz hər dəfə kodu təkrarlamayacağıq, sadəcə ayrı bir komponent yaradacağıq, burada biz məlumatları slice-dan çıxaracağıq və onları proqramın bizim ehtiyacımız olan hissələrində çıxaracağıq.

Məhsullarla olan proqramımızı açaq. İndi gəlin products qovluğunda SellerOfProd.jsx faylı yaradaq. Başlamaq üçün lazımi məhsulla slice-ı əldə etmək üçün istifadə edəcəyimiz useSelector hookunu import edək:

import { useSelector } from 'react-redux'

Sonra store-dan bizə lazım olan məhsulu satıcının id-si ilə çıxaraq, bunu biz yeni komponentimizə proplarla ötürəcəyik:

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

Və belə bir satıcı olduğu halda, biz onun adını qaytaracağıq, əgər yoxdursa, 'unknown' qaytaracağıq:

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

İndi gəlin yeni komponentimizi ProductsList.jsx faylına import edək və onu ProductsList funksiyasında məhsulun adı olan başlıqdan dərhal sonra yerləşdirək. Gördüyünüz kimi, biz ona proplarda id ötürdük:

<SellerOfProd sellerId={product.seller} />

İndi, əgər biz proqramımızı işə salsaq, yeni məhsul əlavə etsək və onu siyahıda tapsaq, görərik ki, onun üçün satıcı peyda oldu, proqram işə salındıqda avtomatik əlavə edilən məhsullar üçün isə 'unknown' olacaq.

Kiçik bir araşdırma: əgər sizin eslint VS Code redaktorunda sellerId-yə etiraz edirsə, proqram işləyirsə, onda siz bunu hələlik laqeyd edə bilərsiniz və ya .eslintrc.cjs faylını açıb rules hissəsində "react/prop-types": "off" əlavə edə bilərsiniz.

Öz-özünə aydındır ki, biz satıcı haqqında məlumatı məhsul səhifəsində də əlavə etmək istərdik. Bunun üçün ProductPage səhifəsinin qurulmasında məhsulun adı olan başlıqdan sonra yenə bu sətri yerləşdirək və yoxlayaq ki, hər şey işləyir:

<SellerOfProd sellerId={product.seller} />

Tələbələrlə olan proqramınızı açın. Dərsin materialını öyrəndikdən sonra, students qovluğunda TeacherForStudent komponenti üçün fayl yaradın. Nəticədə komponent müəllimin A.S.İ.-ni qaytarmalıdır, yanında mötərizədə isə onun dərs etdiyi fənn göstərilməlidir. Lazımi müəllimi useSelector hooku ilə tapın. Əgər bu tələbə üçün müəllim yoxdursa, 'anonym' çıxarın.

Əvvəlki məsələdən alınan komponentdən istifadə edərək hər bir tələbə üçün müəllim məlumatlarını tələbələrin siyahısı olan səhifədə çıxarın.

Əvvəlki məsələdə etdiyiniz eyni şeyi edin, lakin ayrıca tələbə səhifəsi üçün.