Reutilizarea datelor dintr-un slice în Redux

În lecția precedentă am adăugat la formularul pentru adăugarea produsului încă un câmp cu o listă derulantă pentru selectarea vânzătorului, care îl publică. Să presupunem, acum trebuie să afișăm această informație și în alte câteva locuri din aplicație. Pentru asta nu vom duplica de fiecare dată codul, ci pur și simplu vom crea un component separat, în care vom extrage datele din slice și le vom afișa în acele părți ale aplicației unde avem nevoie.

Deschideți aplicația noastră cu produse. Haideți acum în folderul products să creăm încă un fișier SellerOfProd.jsx. Pentru început importăm hook-ul useSelector, cu ajutorul căruia vom obține slice-ul cu produsul necesar:

import { useSelector } from 'react-redux'

Apoi extragem din store produsul necesar după id-ul vânzătorului, pe care îl vom transmite noului nostru component în props:

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

Și în cazul în care există un astfel de vânzător, vom returna numele lui, iar dacă nu, vom returna 'unknown':

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

Haideți acum să importăm noul nostru component în ProductsList.jsx și să îl inserăm în funcția ProductsList imediat după titlul cu numele produsului. După cum vedeți, i-am transmis în props id-ul:

<SellerOfProd sellerId={product.seller} />

Acum, dacă pornim aplicația noastră, adăugăm un produs nou și îl găsim în listă, vom vedea că acesta are un vânzător, iar la produsele, adăugate automat la pornirea aplicației, va fi 'unknown'.

O mică digresiune: dacă eslint-ul din editorul VS Code se plânge de sellerId, iar aplicația funcționează, puteți ignora deocamdată acest lucru sau puteți deschide fișierul .eslintrc.cjs al aplicației dumneavoastră și în rules adăugați "react/prop-types": "off".

Se subînțelege că am fi vrut să adăugăm informația despre vânzător și pe pagina produsului. Pentru aceasta vom insera în markup-ul ProductPage după titlul cu numele produsului din nou această linie și vom verifica că totul funcționează:

<SellerOfProd sellerId={product.seller} />

Deschideți aplicația dumneavoastră cu studenți. După ce ați studiat materialul lecției, în folderul students creați un fișier pentru componentul TeacherForStudent. Ca rezultat, componentul ar trebui să returneze numele și prenumele profesorului, iar lângă în paranteze materia pe care o predă. Pe profesorul necesar îl găsiți cu ajutorul hook-ului useSelector. Dacă profesorul pentru acest student lipsește, afișați 'anonym'.

Cu ajutorul componentului obținut din sarcina anterioară afișați datele profesorului pentru fiecare student pe pagina cu lista studenților.

Faceți același lucru ca și în sarcina anterioară, dar pentru pagina separată a studentului.