Primena statusa zahteva u Redux-u

Na prethodnim časovima smo uz pomoć dodatnih reduser-a opisali šta da radi naša aplikacija, ako fetchProducts šalje pri zahtevu akcije pending, fulfilled i rejected. Sada možemo da pokažemo korisniku na kojoj je fazi trenutno učitavanje podataka.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl ProductsList.jsx. Prvo šta ćemo uraditi jeste da napravimo poseban komponent za karticu proizvoda ProductCard. Uradimo to odmah nakon linija import-a pre funkcije ProductsList. Kao pros prosledićemo mu product:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return ()
}

A sada u prazne okrugle zagrade return prenesimo ceo kod za prikazivanje podataka proizvoda iz dispProducts:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return (
    <div key={product.id} className="product-excerpt">
      <h3>{product.name}</h3>
      <SellerOfProd sellerId={product.seller} />
      <p>{product.desc.substring(0, 100)}</p>
      <UserReactions product={product} />
      <Link to={`/products/${product.id}`} className="link-btn">
        view
      </Link>
    </div>
  )
}

I uklonimo u ProductsList preostalu liniju koda. Ona nam više nije potrebna:

products/ProductsList.jsxconst dispProducts = products.map((product) => ())

A sada na početku koda funkcije ProductsList napišimo još par promenljivih, error i content. Prva će nam biti za grešku, u drugu ćemo upisivati ono ili ovo sadržaje u zavisnosti od statusa zahteva. Uradimo to pre const dataFetch = useRef(false):

products/ProductsList.jsxconst error = useSelector((state) => state.products.error)
let content

Sada pre komande return komponenta ProductsList napišimo blok koda sa uslovima, pri kojima će u content biti upisivano ono ili ovo sadržaj u zavisnosti od statusa. Prvi ćemo opisati status 'in progress' - kada je naš zahtev poslat. U ovom slučaju obavestićemo korisnika, da se podaci učitavaju:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Lista proizvoda se učitava ...</p>
}

Ako se naše učitavanje izvršilo uspešno (označavali smo ovo kao 'success'), onda nam treba da prikažemo listu dobijenih proizvoda. Prikažimo ga u map uz pomoć komponenta ProductCard, kojemu pros prosledimo product:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Lista proizvoda se učitava ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
}

I poslednji status, koji mi imamo - to je 'fail'. Dodajmo i njega. Koristimo ovde promenljivu error, u koju smo gore upisali grešku iz state-a:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Lista proizvoda se učitava ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
} else if (productStatus === 'fail') {
  content = <div>{error}</div>
}

I poslednjim korakom mi u bloku koda za return zamenimo stari {dispProducts} sa {content}.

Pokrenimo našu aplikaciju, kliknimo u meniju na 'Products'. Sve radi. Vidimo, da otprilike 2 sekundi (kao što smo i podesili na serveru) kod nas ispod forme dodavanja proizvoda visi natpis 'Products list loading ...', a onda se pojavi lista proizvoda.