Redux'те сатуучулардын тизмеси

Өткөн сабактарда биз негизги материалдарды аяктадык. Азыр thunk жардамы менен биз серверден продуктулардын тизмесин алабыз жана серверге жаңы продуктту сактай алабыз. Келгиле, сатуучулар менен таанышалы. Анткени биз алар үчүн да маалымат алабыз. Келгиле, сатуучулардын тизмеси менен өзүнчө баракча жасайлы.

Продуктулар менен болгон колдонмобузду ачалы, ал жердеги sellers папкасына кирели. Бул папканын ичинде SellersList.jsx файлын түзөбүз. Бул жерде биз useSelector, Link жана selectAllSellers колдонобуз, анын коду биз sellersSlice.js файлында кийинчерээк жазабыз:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Андан кийин SellersList компонентин түзөбүз. Анда биз сатуучулардын баарын useSelector хукунун жардамы менен алабыз, андан кийин сатуучулардын тизмеси үчүн верстканы map циклинде алабыз, ар бир сатуучунун аты өзүнүн баракчасына шилтеме болот. Жана аягында баш атама менен верстканы жаратылган тизме менен кайтарабыз:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Сатуучулар:</h2>

			<ul>{sellersToRender}</ul>
		</div>
	)
}

Андан кийин sellersSlice.js файлына кирип, productsSlice.js файлындагы селекторлорго окшош файлдын эң аягында редьюсерди экспорттоодон кийин эки селектор түзөбүз:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Эми бизге тизме баракчасы үчүн багытты жазуу керек, бул үчүн App.jsx файлын ачып, багытынын тизмесине children дагы бир объект кошобуз (SellersList компонентин импорттоону унутпаңыз):

{
	path: '/sellers',
	element: <SellersList />,
},

Менюдогу 'Сатуучулар' шилтемебиз иштеши үчүн, келгиле root.jsx файлына кийип (канчага болду бул... ) жана a тегин NavLink элемент менен алмаштыралы:

<NavLink to="/sellers" end>
	Сатуучулар
</NavLink>

Жана акыркы нерсе. Биздин менюбизде активдүү шилтеме белгиленип, кайсы баракчада экенибиз түшүнүктүү болушу үчүн, биз index.css файлына стиль кошобуз:

nav a.active {
	color: purple;
}

Колдонмобузду иштетели. Эми биз сатуучулар баракчасына кире алабыз, менюдан 'Сатуучулар' боюнча чыкылдап. Албетте, алгач менюдан 'Продуктулар' боюнча чыкылдаш керек, антпесе биздин продуктулар жүктөлбөйт. Кийинки сабакта ар бир сатуучу үчүн баракча жасайбыз жана ушуну менен Redux буйунча окуу куралын окуп бүтөбүз.

Окуучулар менен болгон колдонмонузду ачыңыз. Сабақтын материалын үйрөнгөндөн кийин, teachers папкасында TeachersList.jsx файлын түзүңүз. Бул компоненттин жардамы менен сиз окутуучулардын тизмесин көрсөтөсүз. Ага керектүү компоненттерди жана хукаларды импорттоп алыңыз.

TeachersList компоненти үчүн код жазыңыз, анда бардык окутуучуларды алып, окутуучулардын тизмесин teachersToRender жасаңыз, бул тизменин ар бир сабында алардын фамилиялары жана баш тамгалары көрсөтүлсүн, ал эми кашаа ичинде алар окутуучу предмет. Ар бир ФАА шилтеме болсун, ал ар бир окутуучу үчүн өзүнчө баракчага алып баруучу болсун. Андан кийин компоненттин кодунун аягында баш атама менен верстканы жаратылган тизме менен кайтарыңыз.

teachersSlice.js файлынын аягында селектор-функциялардын жупун selectAllTeachers жана selectTeacherById түзүңүз, сабакта көрсөтүлгөндөй.

App.jsx файлында окутуучулардын баракчасы үчүн дагы бир багытынын тизмесин туташтырыңыз.

root.jsx файлындагы менюдо 'Окутуучулар' үчүн a тегин NavLink менен алмаштырыңыз, сабакта көрсөтүлгөндөй. Менюдогу активдүү шилтемени белгилөө үчүн, ага index.css файлына стильдерди кошуңыз.