Två grundläggande idéer i Redux

Innan vi börjar studera biblioteket Redux, låt oss bekanta oss med dess två grundläggande idéer. Den första idén, som rör tillståndshantering, kommer vi att titta på med exemplet med en vanlig räknare på 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 den här koden ser vi state för variabeln count - det är sanningens källa för räknaren. Sedan ser vi aktion (action) - en händelse, som vid användarens klick utlöser en uppdatering av state. Och slutligen, vyn (view), som vi använder för att visa användargränssnittet.

Således är schemat ganska enkelt: knappen trycks - state count (State) vid klick (Action) ändras, följaktligen ändras vyn (View) - i vårt fall är det siffran på skärmen.

Men allt blir mer komplicerat om vi har många komponenter som ska använda samma state. Man kan förstås till exempel lyfta state till föräldrakomponenter, men en sådan lösning kan inte alltid befria från problemet. Redux erbjuder i det här fallet att skapa en plats i applikationen, som skulle innehålla globalt state och vissa beteendemönster vid uppdatering av detta state. Det är i detta den första grundläggande idén ligger (!).

Den andra idén är förknippad med oföränderlighet, det vill säga datans oföränderlighet. Du kommer säkert ihåg från JavaScript att arrayer och objekt kan ändras. Att ändra data direkt i Redux, liksom i andra ramverk anses vara dålig stil och kan leda till oförutsägbara konsekvenser. Därför måste våra initiala objekt och arrayer i Redux förbli oföränderliga, och vi får bast ändra på deras kopior.

Berätta vad den första grundläggande idén med Redux innebär.

Berätta vad den andra grundläggande idén med Redux innebär.