Страница на продавача в Redux

Остава само малко. На този урок нека направим последното нещо - да добавим в нашето приложение отделна страница за всеки продавач. Тук ще има само вече познати за вас действия. Да започваме.

Нека отворим нашето приложение с продукти, а в него папката sellers. Ще създадем в тази папка файл SellerPage.jsx. Сега нека започнем да пишем кода за SellerPage за нашия компонент:

sellers/SellersPage.jsxexport const SellerPage = () => {}

Като начало ще получим id на продавача и по него ще намерим обекта на нужния продавач в слайса:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

След това по-надолу в кода за SellerPage след получаване на продавача ще получим всички продукти, а след това ще изберем от тях само тези, които са публикувани от този продавач:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

И след това от имената на избраните продукти ще формираме списък с помощта на map. Като всяко име на продукт в този списък ще бъде връзка към страницата на този продукт:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

И в края на кода за SellerPage ще върнем верстката: заглавие с името на продавача и списък с продуктите, които този продавач е публикувал:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Seller: {seller.name}</h2>

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

Разбира се, ние също така се нуждаем от маршрут за страницата на продавача. Нека отворим файла App.jsx и да го добавим последен към дъщерните маршрути:

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

Не забравяйте да импортирате необходимите хукове и компоненти в SellersPage.jsx и App.jsx.

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

Това е всието за сега. Ние изучихме основите на Redux за създаване на приложение и дори малко по-задълбочено. Запознахме се с различни полезни инструменти. Пожелавам ви успех в създаването на вашите Redux приложения!