Správa stavov v React aplikáciách

Správa stavov (state management) je jednou z najdôležitejších súčastí vývoja aplikácií v Reacte. Každá interaktívna webová aplikácia si vyžaduje správu údajov, ktoré sa môžu meniť v čase. V tomto článke vám ukáže, ako efektívne pracovať so stavom v React aplikáciách, od základných až po pokročilé techniky.

Čo je stav (state) v Reacte?

Stav v Reacte predstavuje údaje, ktoré sa môžu meniť počas životného cyklu komponentu. React umožňuje pracovať so stavom na úrovni jednotlivých komponentov aj na globálnej úrovni.

Aký má správa stavov praktický význam?

Efektívna správa stavov umožňuje:

Zachovanie dát a ich dynamickú aktualizáciu v aplikácii.
Minimalizáciu zbytočných re-renderov komponentov.
Jednoduchšie škálovanie a udržiavateľnosť kódu.

1. Lokálny stav v Reacte: useState

Najjednoduchší spôsob správy stavu je použitie useState, ktorý uchováva stav priamo v komponente.

import { useState } from "react";

function Pocitadlo() {
    const [pocet, setPocet] = useState(0);

    return (
        <div>
            <p>Počet kliknutí: {pocet}</p>
            <button onClick={() => setPocet(pocet + 1)}>Klikni</button>
        </div>
    );
}

Vysvetlenie:

useState definuje stavovú premennú pocet a funkciu setPocet na jej aktualizáciu.
Každé kliknutie na tlačidlo zvýši hodnotu pocet o 1.

2. Komplexnejší stav: useReducer

Ak je stav aplikácie zložitejší, odporúča sa použiť useReducer, ktorý funguje podobne ako Redux.

import { useReducer } from "react";

const reducer = (state, action) => {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            return state;
    }
};

function Pocitadlo() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Počet: {state.count}</p>
            <button onClick={() => dispatch({ type: "increment" })}>+1</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
        </div>
    );
}

Kedy použiť useReducer?

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

Ak máte viacero možných zmien stavu (napr. rôzne tlačidlá na zvýšenie/zníženie hodnoty).
Ak stav zahŕňa viacero premenných, ktoré sú navzájom prepojené.

3. Globálny stav v Reacte: Context API

Ak potrebujete spravovať stav medzi viacerými komponentmi, môžete použiť React Context API. Context umožňuje zdieľať dáta medzi komponentmi bez nutnosti preposielať ich cez props.

import { createContext, useState, useContext } from "react";

const TemaContext = createContext();

function TemaProvider({ children }) {
    const [tema, setTema] = useState("svetlá");

    return (
        <TemaContext.Provider value={{ tema, setTema }}>
            {children}
        </TemaContext.Provider>
    );
}

function Tlacidlo() {
    const { tema, setTema } = useContext(TemaContext);

    return (
        <button onClick={() => setTema(tema === "svetlá" ? "tmavá" : "svetlá")}>
            Zmeniť tému
        </button>
    );
}

function App() {
    return (
        <TemaProvider>
            <Tlacidlo />
        </TemaProvider>
    );
}

4. Správa stavov pomocou Redux

Pre veľké aplikácie je výhodné použiť Redux, ktorý centralizuje správu stavu.

Kedy použiť Redux?

Keď aplikácia obsahuje zložité prepojenia medzi komponentmi.
Keď chcete lepšiu kontrolu nad spravovaním údajov.

Najčastejšie otázky

1. Kedy použiť `useState` a kedy `useReducer`?

Ak máte jednoduchý stav, použite useState. Ak je stav komplexnejší, odporúča sa useReducer.

2. Je Redux nevyhnutný pre správu stavov?

Nie. Pre menšie aplikácie stačí useContext alebo useState.

3. Ako sa vyhnúť zbytočným re-renderom?

Používajte useMemo a useCallback na optimalizáciu výkonu.

Top 5 zaujímavých faktov o správe stavov v Reacte

React Context API bolo predstavené v React 16.3 a výrazne zjednodušilo prácu s globálnym stavom.
Redux bol pôvodne inšpirovaný Flux architektúrou od Facebooku.
Hlavným dôvodom na použitie Context API namiesto Reduxu je jednoduchšia konfigurácia.
Použitie zbytočne veľkých stavových manažérov môže spomaliť aplikáciu.
React dokáže automaticky optimalizovať re-rendery, ak sú správne použité memoizačné techniky.

Chcete sa naučiť programovať?

Ak máte záujem o prezenčné alebo online školenie programovania, pozrite si našu ponuku na www.like-it.sk. Naše kurzy vedú skúsení odborníci, ktorí vám pomôžu zvládnuť základy aj pokročilé koncepty programovania.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect