To grundlæggende ideer i Redux

Før vi begynder at studere Redux-biblioteket, lad os stifte bekendtskab med dens to grundlæggende ideer. Den første idé, som vedrører tilstandshåndtering, vil vi se på ved hjælp af et almindeligt tæller-eksempel med state i 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>
	)
}

I denne kode ser vi state for variablen count - dette er sandhedens kilde for tælleren. Derefter ser vi en handling (action) - en hændelse, som ved brugerens klik udløser en opdatering af state. Og endelig, presentation (view), som vi bruger til at vise brugergrænsefladen.

Således er skemaet ret enkelt: knappen trykkes - state count (State) ved tryk (Action) ændres, hvilket følgelig ændrer presentationen (View) - i vores tilfælde er det tallet på skærmen.

Dog bliver alt mere kompliceret, hvis vi har mange komponenter, som skal bruge den samme state. Man kunne for eksempel løfte state op til forældrekomponenter, men en sådan løsning kan ikke altid fjerne problemet. I dette tilfælde tilbyder Redux os at skabe et sted i applikationen, som indeholder den globale tilstand og bestemme adfærdsmønstre ved opdatering af denne tilstand. Det er netop i dette den første grundlæggende idé består (!).

Den anden idé er forbundet med immutabilitet, det vil sige uforanderlighed af data. Du husker sikkert fra JavaScript, at arrays og objekter kan ændres. Direkte ændring af data i Redux, som i andre frameworks, anses for dårlig stil og kan føre til uforudsigelige konsekvenser. Derfor skal vores oprindelige objekter og arrays i Redux forblive uforanderlige, og vi kan kun ændre deres kopier.

Forklar, hvad den første grundlæggende idé i Redux består i.

Forklar, hvad den anden grundlæggende idé i Redux består i.