Dvě základní myšlenky v Reduxu

Než začneme studovat knihovnu Redux, pojďme se seznámit s jejími dvěma základními myšlenkami. První myšlenku, týkající se správy stavu, si ukážeme na příkladu obyčejného čítače se stavem v Reactu:

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

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

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

V tomto kódu vidíme stav pro proměnnou count - to je zdroj pravdy pro čítač. Potom vidíme akci (action) - událost, která po kliknutí uživatele vyvolá aktualizaci stavu. A konečně, zobrazení (view), pomocí kterého zobrazujeme uživatelské rozhraní.

Schéma je tedy docela jednoduché: tlačítko je stisknuto - stav count (State) po stisknutí (Action) se změní, následně se změní zobrazení (View) - v našem případě číslo na obrazovce.

Vše však bude složitější, pokud máme mnoho komponent, které musí používat jeden a tentýž stav. Lze samozřejmě například pozvednout stav na nadřazené komponenty, ale takové řešení nemusí vždy problému zbavit. Redux v tomto případě nám nabízí vytvořit jedno místo v aplikaci, které by obsahovalo globální stav a určité vzory chování při aktualizaci tohoto stavu. Právě v tomto spočívá první základní myšlenka (!).

Druhá myšlenka souvisí s imutabilitou, tedy s neměnností dat. Jistě si pamatujete z JavaScriptu, že pole a objekty lze měnit. Přímá změna dat v Reduxu, stejně jako v jiných frameworkech, je považována za špatný styl a může vést k nepředvídatelným důsledkům. Proto v Reduxu musí naše původní objekty a pole zůstat imutabilní, a měnit můžeme pouze jejich kopie.