Twee basisideeën in Redux

Voordat we beginnen met het leren van de Redux-bibliotheek, laten we eerst kennis maken met twee van haar basisideeën. Het eerste idee, dat betrekking heeft op statebeheer, bespreken we aan de hand van een gewone teller met state in React:

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>
	)
}

In deze code zien we de state voor de variabele count - dit is de bron van waarheid voor de teller. Vervolgens zien we een actie (action) - een gebeurtenis die bij een klik van de gebruiker een state-update veroorzaakt. En tenslotte, de weergave (view), waarmee we de gebruikersinterface tonen.

De schema is dus vrij eenvoudig: er wordt op een knop geklikt - de state count (State) verandert bij een klik (Action), waardoor de weergave (View) verandert - in ons geval is dat het getal op het scherm.

Echter, alles wordt ingewikkelder als we veel componenten hebben die dezelfde state moeten gebruiken. We kunnen de state natuurlijk, bijvoorbeeld, omhoog tillen naar bovenliggende componenten, maar zo'n oplossing kan het probleem niet altijd verhelpen. Redux biedt ons in dat geval aan om één plek in de applicatie te creëren, die de globale state bevat en bepaalde gedragspatronen bij het updaten van die state. Dit is precies het eerste basisidee (!).

Het tweede idee heeft te maken met onveranderlijkheid (immutability), dat wil zeggen, met het onveranderlijk zijn van gegevens. U herinnert zich natuurlijk uit JavaScript dat arrays en objecten aangepast kunnen worden. Het direct aanpassen van gegevens in Redux, net als in andere frameworks, wordt beschouwd als slechte stijl en kan leiden tot onvoorspelbare gevolgen. Daarom moeten in Redux onze initiële objecten en arrays onveranderlijk blijven, en mogen we alleen kopieën ervan aanpassen.

Leg uit wat het eerste basisidee van Redux inhoudt.

Leg uit wat het tweede basisidee van Redux inhoudt.