Vícenásobné použití dat ze slice v Reduxu

V minulé lekci jsme k formuláři pro přidání produktu přidali další pole s rozbalovacím seznamem pro výběr prodejce, který jej vystavuje. Předpokládejme, že nyní potřebujeme tyto informace zobrazit ještě na několika místech aplikace. Kvůli tomu nebudeme pokaždé duplikovat kód, ale jednoduše vytvoříme samostatnou komponentu, ve které budeme extrahovat data ze slice a zobrazovat je v těch částech aplikace, kde potřebujeme.

Otevřeme naši aplikaci s produkty. Nyní ve složce products vytvořme ještě soubor SellerOfProd.jsx. Pro začátek importujeme hook useSelector, pomocí kterého získáme slice s potřebným produktem:

import { useSelector } from 'react-redux'

Poté extrahujeme z store potřebný produkt podle id prodejce, které budeme předávat naší nové komponentě v props:

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

A v případě, že takový prodejce existuje, budeme vracet jeho název, a pokud ne, vrátíme 'unknown':

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

Nyní importujme naši novou komponentu do ProductsList.jsx a vložme ji ve funkci ProductsList hned za nadpis s názvem produktu. Jak vidíte, předali jsme mu v props id:

<SellerOfProd sellerId={product.seller} />

Nyní, pokud spustíme naši aplikaci, přidáme nový produkt a najdeme jej v seznamu, uvidíme, že se u něj objevil prodejce, a u produktů, automaticky přidaných při spuštění aplikace, bude 'unknown'.

Malá odbočka: pokud váš eslint v editoru VS Code hlásí chybu na sellerId, ale aplikace funguje, můžete to prozatím ignorovat nebo otevřít soubor .eslintrc.cjs vaší aplikace a v rules přidat "react/prop-types": "off".

Samozřejmě, že bychom chtěli přidat informace o prodejci i na stránce produktu. Kvůli tomu vložme ve verstránce ProductPage za nadpis s názvem produktu opět tento řádek a zkontrolujme, že vše funguje:

<SellerOfProd sellerId={product.seller} />

Otevřete vaši aplikaci se studenty. Po prostudování látky lekce ve složce students vytvořte soubor pro komponentu TeacherForStudent. Výsledkem by mělo být, že komponenta vrací jméno učitele a vedle v závorce předmět, který učí. Požadovaného učitele najděte pomocí hooku useSelector. Pokud učitel pro daného studenta chybí, vypište 'anonym'.

Pomocí získané komponenty z předchozího úkolu zobrazte data učitele pro každého studenta na stránce se seznamem studentů.

Udělejte to samé, co v předchozím úkolu, ale pro samostatnou stránku studenta.