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:

function 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.

Vysvětlete, v čem spočívá první základní myšlenka Reduxu.

Vysvětlete, v čem spočívá druhá základní myšlenka Reduxu.