Dve základné myšlienky v Reduxe

Skôr než začneme so štúdiom knižnice Redux, zoznámime sa s jej dvoma základnými myšlienkami. Prvú myšlienku, týkajúcu sa riadenia stavu, si ukážeme na príklade obyčajného počítadla so stavom v Reacte:

jsxfunction Counter() {
  // Stav
  const [count, setCount] = useState(0)

  // Akcia:
  function clickHandler() {
    setCount(count + 1)
  }

  // Zobrazenie:
  return (
    <div>
      <span>{count}</span>
      <button onClick={clickHandler}>+</button>
    </div>
  )
}

V tomto kóde vidíme stav pre premennú count - to je zdroj pravdy pre počítadlo. Potom vidíme akciu (action) - udalosť, ktorá pri kliknutí používateľa spôsobí aktualizáciu stavu. A nakoniec, zobrazenie (view), pomocou ktorého zobrazujeme užívateľské rozhranie.

Schéma je teda celkom jednoduchá: tlačidlo sa stlačí - stav count (State) pri stlačení (Action) sa zmení, preto sa zmení zobrazenie (View) - v našom prípade je to číslo na obrazovke.

Avšak, všetko bude zložitejšie, ak máme množstvo komponentov, ktoré musia používať jeden a ten istý stav. Samozrejme, môžeme napríklad vyvýšiť stav do nadradených komponentov, ale takéto riešenie nie vždy môže vyriešiť problém. Redux v tomto prípade nám ponúka vytvoriť jedno miesto v aplikácii, ktoré by obsahovalo globálny stav a určité vzory správania pri aktualizácii tohto stavu. Práve v tom spočíva prvá základná myšlienka (!).

Druhá myšlienka súvisí s imutabilitou, teda s nemeniteľnosťou údajov. Vy, samozrejme, pamätáte z JavaScriptu, že polia a objekty je možné meniť. Zmena údajov priamo v Reduxe, rovnako ako v iných frameworkoch sa považuje za zlý štýl a môže viesť k nepredvídateľným dôsledkom. Preto v Reduxe naše pôvodné objekty a polia musia zostať imutabilné, a meniť môžeme len ich kópie.