Повторна употреба на податоци од слајс во Redux

На претходната лекција додадовме на формата за додавање на производ уште едно поле со паѓачка листа за избор на продавач, кој го објавува. Да претпоставиме, сега ние исто така треба да ја прикажеме оваа информација во уште неколку места во апликацијата. За ова ние немаме секој пат да го дуплираме кодот, туку едноставно ќе создадеме одделна компонента, во која ќе ги извлечеме податоците од слајсот и ќе ги прикажеме во оние делови на апликацијата каде што ни треба.

Да ја отвориме нашата апликација со производи. Ајде сега во папката products да создадеме уште еден фајл SellerOfProd.jsx. За почеток да го импортираме хукито useSelector, со помош на кој ќе го добиеме слајсот со потребниот производ:

import { useSelector } from 'react-redux'

Потоа да го извлечеме од store потребниот производ по id на продавачот, кој ќе го пренесуваме на нашата нова компонента во пропсите:

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

И во случај, доколку таков продавач постои, ние ќе го враќаме неговото име, а ако не, ќе вратиме 'unknown':

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

Ајде сега да ја импортираме нашата нова компонента во ProductsList.jsx и да ја вметнеме во функцијата ProductsList веднаш после насловот со името на производот. Како што можете да видите, ние му го пренесовме id во пропсите:

<SellerOfProd sellerId={product.seller} />

Сега, ако ја стартуваме нашата апликација, додадеме нов производ и го најдеме во листата, ќе видиме дека добил продавач, а кај производите, кои автоматски се додадени при стартување на апликацијата, ќе стои 'unknown'.

Малo забелешка: ако вашиот eslint во едиторот VS Code се жали на sellerId, а апликацијата работи, тогаш можете засега да го игнорирате ова или да го отворите фајлот .eslintrc.cjs на вашата апликација и во rules да додадете "react/prop-types": "off".

Се разбира, дека би сакале да додадеме информација за продавачот и на страницата на производот. За ова да ја вметнеме во верстката на ProductPage после насловот со името на производот повторно оваа линија и да провериме дека сè работи:

<SellerOfProd sellerId={product.seller} />

Отворете ја вашата апликација со студенти. Проучувајќи го материјалот од лекцијата, во папката students создадете фајл за компонентата TeacherForStudent. Како резултат компонентата треба да го враќа името и презимето на предавачот, а веднаш до него во загради предметот кој го предава. Потребниот предавач пронајдете го со помош на хукито useSelector. Ако предавачот за дадениот студент недостасува, прикажете 'anonym'.

Со помош на добиената компонента од претходната задача прикажете ги податоците за предавачот за секој студент на страницата со листа на студенти.

Направете го истото што и во претходната задача, но за одделната страница на студентот.