Tiedon uudelleenkäyttö Redux-slicesta

Edellisellä tunnilla lisäsimme tuotteen lisäämisen lomakkeeseen toisen kentän pudotusvalikolla myyjän valitsemiseksi, joka julkaisee sen. Oletetaan, että nyt meidän on myös näytettävä tämä tieto muutamassa muussa sovelluksen kohdassa. Sitä varten emme tällä kertaa kopioi koodia, vaan luomme yksinkertaisen erillisen komponentin, josta poimimme tiedot slicesta ja näytämme ne sovelluksen osissa, joissa tarvitsemme.

Avataan tuotesovelluksemme. Luodaan nyt kansioon products toinen tiedosto SellerOfProd.jsx. Aluksi tuodaan useSelector -hook, jonka avulla saamme tarvittavan tuotteen sisältävän slicen:

import { useSelector } from 'react-redux'

Poimitaan sitten storesta tarvittava tuote myyjän id:n perusteella, jonka välitämme uudelle komponentille propsien kautta:

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

Ja jos sellainen myyjä on olemassa, palautamme hänen nimensä, ja jos ei, palautamme 'unknown':

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

Tuodaan nyt uusi komponentti tiedostoon ProductsList.jsx ja lisätään se ProductsList -funktioon heti tuotteen nimen otsikon jälkeen. Kuten näette, annoimme sille id:n propsien kautta:

<SellerOfProd sellerId={product.seller} />

Nyt, jos käynnistämme sovelluksemme, lisäämme uuden tuotteen ja löydämme sen listasta, näemme, että siihen on liitetty myyjä, ja automaattisesti sovelluksen käynnistyessä lisätyillä tuotteilla on 'unknown'.

Pieni sivuhuomio: jos VS Code -editorissasi eslint valittaa sellerId:stä, mutta sovellus toimii, voit ohittaa sen toistaiseksi tai avata sovelluksesi tiedoston .eslintrc.cjs ja lisätä rules:iin "react/prop-types": "off".

Itsestään selvästi haluaisimme lisätä myyjän tiedot myös tuotesivulle. Lisätään siis ProductPage:n renderöinnissä tuotteen nimen otsikon jälkeen jälleen tämä rivi ja tarkistetaan, että kaikki toimii:

<SellerOfProd sellerId={product.seller} />

Avaa opiskelijasovelluksesi. Oppitunnin materiaalia tutkittuasi, luo kansioon students tiedosto komponentille TeacherForStudent. Lopputuloksena komponentin tulee palauttaa opettajan koko nimi, ja vieressä suluissa aine, jota hän opettaa. Tarvittavan opettajan löydät useSelector -hookin avulla. Jos opettajaa tietylle opiskelijalle ei löydy, näytä 'anonym'.

Edellisessä tehtävässä saadun komponentin avulla näytä kunkin opiskelijan opettajan tiedot opiskelijalistaa sisältävällä sivulla.

Tee sama kuin edellisessä tehtävässä, mutta yksittäisen opiskelijan sivulle.