Dvi pagrindinės Redux idėjos

Prieš pradėdami mokytis Redux bibliotekos, pažinkime dvi jos pagrindines idėjas. Pirmąją idėją, susijusią su būsenos valdymu, aptarsime paprasto skaitiklio pavyzdžiu naudojant React būseną:

function Counter() {
	// Būsena
	const [count, setCount] = useState(0)

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

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

Šiame kode matome būseną kintamajam count - tai yra tiesos šaltinis skaitikliui. Toliau matome veiksmą (action) - įvykį, kuris paspaudus vartotoją sukelia būsenos atnaujinimą. Ir galiausiai, vaizdą (view), kuriuo atvaizduojame vartotojo sąsają.

Taigi schema gana paprasta: mygtukas paspaudžiamas - būsena count (State) paspaudus (Action) pasikeičia, todėl pasikeičia vaizdas (View) - mūsų atveju tai skaičius ekrane.

Tačiau viskas bus sudėtingiau, jei turime daug komponentų, kurie turi naudoti tą pačią būseną. Galima, žinoma, pavyzdžiui pakelti būseną aukštyn į tėvinius komponentus, bet toks sprendimas ne visada gali išspręsti problemą. Redux šiuo atveju siūlo mums sukurti vieną vietą programoje, kuri talpintų globalią būseną ir tam tikrus elgesio modelius atnaujinant šią būseną. Būtent tame ir slypi pirmoji pagrindinė idėja (!).

Antroji idėja susijusi su nekintamumu, tai yra, su duomenų nepakitusia prigimtimi. Jūs, žinoma, prisimenate iš JavaScript, kad masyvus ir objektus galima keisti. Duomenų keitimas tiesiogiai Redux, kaip ir kituose karkasuose, laikomas blogu tonu ir gali sukelti nepnumatomas pasekmes. Todėl Redux mūsų pradiniai objektai ir masyvai turi išlikti nekintami, o keisti galime tik jų kopijas.

Papasakokite, ką reiškia pirmoji pagrindinė Redux idėja.

Papasakokite, ką reiškia antroji pagrindinė Redux idėja.