Divas pamatidejas Redux

Pirms sākam apgūt Redux bibliotēku, iepazīsimies ar divām tās pamatidejām. Pirmo ideju, kas attiecas uz stāvokļa pārvaldību, mēs apskatīsim ar parasta skaitītāja piemērā uz stāvokļa React:

function Counter() {
	// Stāvoklis
	const [count, setCount] = useState(0)

	// Darbība:
	function clickHandler() {
		setCount(count + 1)
	}

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

Šajā kodā mēs redzam stāvokli mainīgajam count - tas ir patiesības avots skaitītājam. Tad mēs redzam darbību (action) - notikumu, kas pēc lietotāja klikšķa izsauc stāvokļa atjaunināšanu. Un, visbeidzot, attēlojumu (view), ar kura palīdzību mēs attēlojam lietotāja interfeisu.

Tādējādi shēma ir diezgan vienkārša: poga tiek nospiesta - stāvoklis count (State) pēc nospiešanas (Action) mainās, līdz ar to mainās attēlojums (View) - mūsu gadījumā tas ir skaitlis uz ekrāna.

Tomēr, viss kļūs sarežģītāk, ja mums ir daudz komponentu, kuriem jāizmanto viens un tas pats stāvoklis. Var, protams, piemēram pacelt stāvokli augšup līdz vecāku komponentiem, bet šāds risinājums ne vienmēr var atrisināt problēmu. Redux šajā gadījumā piedāvā mums izveidot vienu vietu lietotnē, kura saturētu globālo stāvokli un noteiktus uzvedības modeļus, kad šis stāvoklis tiek atjaunināts. Tieši tas ir pirmā pamatideja (!).

Otrā ideja ir saistīta ar imutabilitāti, proti, ar datu nemainīgumu. Jūs, protams, atceraties no JavaScript, ka masīvus un objektus var mainīt. Datu tieša maiņa Redux, tāpat kā citos ietvaros, tiek uzskatīta par sliktu praksi un var novest pie nenovērojāmām sekām. Tāpēc Redux mūsu sākotnējiem objektiem un masīviem jāpaliek imutabliem, un mainīt mēs varam tikai to kopijas.

Pastāstiet, ko satur pirmā pamatideja Redux.

Pastāstiet, ko satur otrā pamatideja Redux.