magdo
38 lines
2.3 KiB
TeX
38 lines
2.3 KiB
TeX
\section{Adatlekérés}
|
|
|
|
\begin{frame}{Hogyan kap adatot egy React alkalmazás?}
|
|
\begin{block}{Az alaphelyzet}
|
|
A React alkalmazás a böngészőben fut --- az adatok (felhasználók, termékek, stb.) általában egy \textbf{háttérszerveren} élnek. Az adatcserét HTTP kérésekkel végezzük: a frontend elküldi a kérést, a szerver JSON formátumban válaszol.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item A böngésző beépített \texttt{fetch} API-ját vagy az \textbf{Axios} könyvtárat használhatjuk.
|
|
\item Az adatlekérést általában egy \texttt{useEffect}-ben indítjuk el --- amikor a komponens megjelenik.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Fetch vs.\ Axios}
|
|
\begin{itemize}
|
|
\item \textbf{Fetch:} beépített, nem kell telepíteni. Hátránya: a hibás HTTP kódokat (pl. 404) \emph{nem} dobja el automatikusan, JSON-t kézzel kell kezelni.
|
|
\item \textbf{Axios:} telepíthető könyvtár. Automatikusan kezeli a JSON-t, a HTTP hibákra kivételt dob, és \textbf{interceptorokkal} (pl. token hozzáadása minden kéréshez) könnyű kiegészíteni.
|
|
\item Nagyobb projekteknél az Axios általában kényelmesebb és biztonságosabb.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Állapotok az adatlekérés során}
|
|
\begin{itemize}
|
|
\item \textbf{Betöltés (loading):} amíg a kérés folyamatban van, mutassunk spinner-t vagy skeleton-t --- ne maradjon üres az oldal.
|
|
\item \textbf{Siker:} megérkeztek az adatok, megjelenítjük.
|
|
\item \textbf{Hiba (error):} a hálózat megszakadt, a szerver hibát adott --- barátságos hibaüzenetet mutassunk, ne csak üres felületet.
|
|
\item \textbf{Üres állapot (empty):} a válasz sikeres, de nincs adat --- pl. "Nincsenek még termékek".
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Szerverállapot-kezelés: TanStack Query}
|
|
\begin{itemize}
|
|
\item Manuálisan kezelni a loading/error/data állapotokat minden komponensben ismétlődő és hibalehetőséges.
|
|
\item A \textbf{TanStack Query} (korábbi nevén React Query) ezt automatizálja: cache-eli az adatokat, háttérben frissíti, kezeli az újrapróbálkozást.
|
|
\item \textbf{Optimista frissítés:} azonnal frissítjük a UI-t a szerver válasza előtt --- ha a szerver hibát ad, visszaállítjuk. Így az alkalmazás gyorsabbnak tűnik.
|
|
\end{itemize}
|
|
\end{frame}
|