Wielokrotne używanie danych z slice w Redux

Na poprzednich zajęciach dodaliśmy do formularza dodawania produktu kolejne pole z rozwijaną listą do wyboru sprzedawcy, który go wystawia. Załóżmy, teraz musimy również wyświetlić te informacje w kilku innych miejscach aplikacji. W tym celu nie będziemy za każdym razem duplikować kodu, a po prostu stworzymy osobny komponent, w którym będziemy pobierać dane z slice i wyświetlać je w tych częściach aplikacji, gdzie potrzebujemy.

Otwórzmy naszą aplikację z produktami. Teraz w folderze products stwórzmy jeszcze plik SellerOfProd.jsx. Na początek zaimportujmy hook useSelector, za pomocą którego będziemy pobierać slice z potrzebnym produktem:

import { useSelector } from 'react-redux'

Następnie pobierzmy z store potrzebny produkt po id sprzedawcy, który będziemy przekazywać naszemu nowemu komponentowi w propsach:

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

I w przypadku, gdy taki sprzedawca istnieje, będziemy zwracać jego nazwę, a jeśli nie, to zwrócimy 'unknown':

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

Teraz zaimportujmy nasz nowy komponent w ProductsList.jsx i wstawmy go w funkcji ProductsList zaraz po nagłówku z nazwą produktu. Jak widzisz, przekazaliśmy mu w propsach id:

<SellerOfProd sellerId={product.seller} />

Teraz, jeśli uruchomimy naszą aplikację, dodamy nowy produkt i znajdziemy go na liście, zobaczymy, że ma sprzedawcę, a u produktów automatycznie dodanych przy uruchomieniu aplikacji będzie 'unknown'.

Małe odstępstwo: jeśli twój eslint w edytorze VS Code narzeka na sellerId, a aplikacja działa, to możesz na razie zignorować to lub otworzyć plik .eslintrc.cjs twojej aplikacji i w rules dodać "react/prop-types": "off".

Samo się rozumie, że chcielibyśmy dodać informację o sprzedawcy również na stronie produktu. W tym celu wstawmy w werscji ProductPage po nagłówku z nazwą produktu znowu ten wiersz i sprawdźmy, czy wszystko działa:

<SellerOfProd sellerId={product.seller} />

Otwórz twoją aplikację ze studentami. Po zapoznaniu się z materiałem lekcji, w folderze students stwórz plik dla komponentu TeacherForStudent. W rezultacie komponent powinien zwracać imię i nazwisko wykładowcy, a obok w nawiasach przedmiot, który prowadzi. Potrzebnego wykładowcę znajdź za pomocą hooka useSelector. Jeśli wykładowca dla danego studenta nie istnieje, wyświetl 'anonym'.

Za pomocą otrzymanego komponentu z poprzedniego zadania wyświetl dane wykładowcy dla każdego studenta na stronie z listą studentów.

Zrób to samo, co w poprzednim zadaniu, ale dla osobnej strony studenta.