Списък на продавачи в Redux

В предишните занятия ние приключихме с основния материал. Сега с помощта на thunk получаваме списък с продукти от сървъра и можем да запазим нов продукт на сървъра. Нека се занимаем с продавачите. В крайна сметка получаваме данни и за тях. Нека направим отделна страница със списък на продавачите.

Нека отворим нашето приложение с продукти, а в него папката sellers. Нека създадем в тази папка файл SellersList.jsx. Тук ще използваме useSelector, Link и selectAllSellers, чийто код ние ще напишем в sellersSlice.js малко по-късно:

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

След това нека създадем самия SellersList. В него ние ще получим всички продавачи с помощта на кука useSelector, след това ще получим верстката за списъка на продавачите в цикъл map, като всяко име на продавач ще води към неговата страница. И накрая ще върнем верстката със заглавие и получения списък:

sellers/SellersList.jsxexport 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>Sellers:</h2>

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

След това нека отидем във файла sellersSlice.js и по аналогия с селекторите в productsSlice.js създадем в самия край на файла два селектора след експорта на редуктора:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

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

Сега трябва да напишем маршрута за страницата със списъка, за това нека отворим файла App.jsx и в масива от дъщерни маршрути children да добавим още един обект (не забравяйте да импортирате компонента SellersList):

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

За да заработи нашата връзка 'Sellers' в менюто, нека влезем във файла root.jsx (как отдавна беше това ... ) и заменим тага a с елемент NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

И последно. За да се подчертае активната връзка в нашето меню и да е ясно на коя страница се намираме, ще добавим стил в index.css:

index.cssnav a.active {
  color: purple;
}

Нека стартираме нашето приложение. Сега можем да влезем на страницата с продавачи, като кликнем върху 'Sellers' в менюто. Преди това, разбира се, трябва да кликнем върху 'Products' в менюто, иначе нашите продукти няма да се заредят. В следващия урок ще направим страница за всеки продавач и с това ще приключим изучаването на този учебник за Redux.