Pārdevēja lapa Redux

Atliek tikai mazliet. Šajā nodarbībā izveidosim pēdējo lietu - pievienosim mūsu lietotnei atsevišķu lapu katram pārdevējam. Šeit būs tikai jums jau pazīstamas darbības. Sāksim.

Atvērsim mūsu lietotni ar produktiem, un tajā mapi sellers. Izveidosim šajā mapē failu SellerPage.jsx. Tagad sāksim rakstīt kodu SellerPage mūsu komponentam:

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

Sākumā iegūsim pārdevēja id un pēc tā atradīsim vajadzīgā pārdevēja objektu slaisī:

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

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

Tālāk zemāk kodā SellerPage pēc pārdevēja iegūšanas mēs iegūsim visus produktus, un tad izvēlēsimies no tiem tikai tos, kurus ir ievietojis šis pārdevējs:

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

Un tad no izvēlēto produktu nosaukumiem izveidosim sarakstu, izmantojot map. Turklāt katrs produkta nosaukums šajā sarakstā būs saite uz šī produkta lapu:

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

Un beigās kodā SellerPage atgriezīsim izskatu: virsrakstu ar pārdevēja nosaukumu un produktu sarakstu, kurus šis pārdevējs ir ievietojis:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Pārdevējs: {seller.name}</h2>

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

Protams, mums vēl ir vajadzīgs maršruts pārdevēja lapai. Atvērsim failu App.jsx un pievienosim to pēdējo pie bērnu maršrutiem:

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

Neaizmirstiet importēt nepieciešamos hookus un komponentus SellersPage.jsx un App.jsx.

Palaidīsim mūsu lietotni, ielādēsim produktus, un tad izvēlnē pa kreisi noklikšķināsim uz saites 'Sellers'. Tagad mēs varam iet uz jebkura pārdevēja lapu, noklikšķinot uz tā nosaukuma, un tad viņa lapā redzēt visus viņa produktus. Un, noklikšķinot uz jebkura no viņa produktiem, iesim uz šī produkta lapu.

Pagaidām tas ir viss. Mēs apguvām Redux pamatus lietotnes izveidošanai un pat nedaudz dziļāk. Iepazināmies ar dažādiem noderīgiem rīkiem. Novēlu jums veiksmi jūsu Redux lietotņu izveidē!