Страница продавца в 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-приложений!