Страница на продавач во 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.name}</h2>

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

Секако дека ни треба и рута за страницата на продавачот. Да ја отвориме датотеката App.jsx и да ја додадеме последна како детска рута:

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

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

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

Ова е се за сега. Ги научивме основите на Redux за креирање на апликација и дури малку подлабоко. Се запознавме со различни корисни алатки. Ви посакувам среќа во креирањето на вашите Redux-апликации!