Kaks põhiideed Reduxis

Enne kui hakkame õppima Reduxi teeki, tutvume kahe selle põhiideega. Esimest ideed, mis puudutab oleku haldamist, vaatleme tavalise loenduri näitel Reacti olekus:

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

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

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

Selles koodis näeme muutuja count olekut - see on tõe allikas loenduri jaoks. Siis näeme tegevust (action) - sündmust, mis kasutaja klõpsul kutsub esile oleku uuendamise. Ja lõpuks, vaade (view), mille abil kuvame kasutajaliidest.

Seega on skeem üsna lihtne: nuppu vajutatakse - muutuja count olek (State) vajutuse peale (Action) muutub, järelikult muutub ka vaade (View) - meie puhul see number ekraanil.

Siiski muutub kõik keerulisemaks, kui meil on mitu komponenti, mis peavad kasutama ühte ja sama olekut. Võib muidugi näiteks tõsta olekut üles vanemkomponentideni, kuid selline lahendus ei pruugi alati probleemist vabastada. Redux pakub sel juhul meile välja luua üks koht rakenduses, mis sisaldaks globaalset olekut ja kindlaid käitumismustreid selle oleku uuendamisel. Just selles peitubki esimene põhiidee (!).

Teine idee on seotud muutumatusega, see tähendab andmete muutumatusega. Te kindlasti mäletate JavaScriptist, et massiive ja objekte saab muuta. Andmete otsene muutmine Reduxis, nagu ka teistes raamistikes, loetakse halvaks stiiliks ja võib viia ettearvamatute tagajärgedeni. Seepärast peavad Reduxis meie algobjektid ja massiivid jääma muutumatuteks, ja muuta saame ainult nende koopiaid.

Rääkige, milles peitub esimene põhiidee Reduxis.

Rääkige, milles peitub teine põhiidee Reduxis.