To grunnleggende ideer i Redux

Før vi begynner å studere Redux-biblioteket, la oss bli kjent med de to grunnleggende ideene. Den første ideen, som handler om tilstandshåndtering, vil vi se på ved å bruke eksemplet med en vanlig teller 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 koden ser vi state for variabelen count - dette er sannhetskilden for telleren. Deretter ser vi handling (action) - en hendelse som ved brukerens klikk utløser en oppdatering av state. Og til slutt, visning (view), som vi bruker for å vise brukergrensesnittet.

Skjemaet er derfor ganske enkelt: knappen trykkes - state count (State) endres ved trykk (Action), og følgelig endres visningen (View) - i vårt tilfelle er det tallet på skjermen.

Imidlertid blir alt mer komplisert hvis vi har mange komponenter som skal bruke den samme state. Man kan for eksempel løfte state opp til foreldrekomponenter, men en slik løsning kan ikke alltid fjerne problemet. I dette tilfellet tilbyr Redux oss å opprette ett sted i applikasjonen som skal inneholde global state og bestemte oppførselmønstre ved oppdatering av denne staten. Det er nettopp i dette den første grunnleggende ideen ligger (!).

Den andre ideen er knyttet til uforanderlighet, det vil si upåvirkelighet av data. Du husker sikkert fra JavaScript at arrays og objekter kan endres. Å endre data direkte i Redux, som i andre rammeverk, anses for dårlig stil og kan føre til uforutsigbare konsekvenser. Derfor må våre opprinnelige objekter og arrays i Redux forbli uforanderlige, og vi kan bare endre kopiene deres.

Forklar hva den første grunnleggende ideen til Redux er.

Forklar hva den andre grunnleggende ideen til Redux er.