Două idei de bază în Redux

Înainte de a începe să studiem biblioteca Redux, să ne familiarizăm cu două dintre ideile sale de bază. Prima idee, legată de managementul stării, o vom analiza folosind exemplul unui contor obișnuit cu stare în React:

function Counter() {
	// Stare
	const [count, setCount] = useState(0)

	// Acțiune:
	function clickHandler() {
		setCount(count + 1)
	}

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

În acest cod, vedem starea pentru variabila count - aceasta este sursa de adevăr pentru contor. Apoi vedem acțiunea (action) - un eveniment care la click-ul utilizatorului determină actualizarea stării. Și, în sfârșit, reprezentarea (view), prin care afișăm interfața utilizatorului.

Astfel, schema este destul de simplă: butonul este apăsat - starea count (State) la apăsare (Action) se modifică, prin urmare se modifică reprezentarea (View) - în cazul nostru acesta este numărul de pe ecran.

Cu toate acestea, totul va fi mai complex dacă avem multe componente care trebuie să utilizeze una și aceeași stare. Desigur, putem, de exemplu, să ridicăm starea către componentele părinte, dar o astfel de soluție nu poate întotdeauna rezolva problema. Redux în acest caz ne propune să creăm un loc unic în aplicație, care să conțină starea globală și anumite modele de comportament la actualizarea acestei stări. Tocmai în aceasta constă prima idee de bază (!).

A doua idee este legată de imutabilitate, adică de nemodificarea datelor. Desigur, vă amintiți din JavaScript că array-urile și obiectele pot fi modificate. Modificarea directă a datelor în Redux, ca și în alte framework-uri, este considerată o practică proastă și poate duce la consecințe imprevizibile. De aceea în Redux obiectele și array-urile noastre inițiale trebuie să rămână imutabile, iar noi le putem modifica doar pe copiile lor.

Spuneți în ce constă prima idee de bază a Redux.

Spuneți în ce constă a doua idee de bază a Redux.