Dve osnovni ideji v Redux

Preden začnemo s študijem knjižnice Redux, se seznanimo z njenima dvema osnovnima idejama. Prvo idejo, ki zadeva upravljanje stanja, bomo obravnavali na primeru običajnega števca na stanju v Reactu:

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

V tej kodi vidimo stanje za spremenljivko count - to je vir resnice za števec. Nato vidimo dejanje (action) - dogodek, ki ob kliku uporabnika povzroči posodobitev stanja. In končno, pogled (view), s pomočjo katerega prikažemo uporabniški vmesnik.

Shema je torej precej preprosta: gumb se pritisne - stanje count (State) ob pritisku (Action) se spremeni, posledično se spremeni pogled (View) - v našem primeru to je številka na zaslonu.

Vendar pa bo vse bolj zapleteno, če imamo veliko komponent, ki morajo uporabljati enako stanje. Seveda lahko, na primer dvignemo stanje do starševskih komponent, vendar takšna rešitev ne more vedno rešiti problema. Redux nam v tem primeru predlaga, da ustvarimo enotno mesto v aplikaciji, ki bi vsebovalo globalno stanje in določene vzorce obnašanja pri posodabljanju tega stanja. Prav v tem je bistvo prve osnovne ideje (!).

Druga ideja je povezana z nepremenljivostjo, to je z nespremenljivostjo podatkov. Seveda se spomnite iz JavaScripta, da polja in objekte lahko spreminjamo. Neposredno spreminjanje podatkov v Reduxu, tako kot v drugih ogrodjih, velja za slabo prakso in lahko vodi do nepredvidljivih posledic. Zato morajo v Reduxu naši začetni objekti in polja ostati nepremenljivi, spreminjati pa lahko le njihove kopije.

Povejte, v čem je bistvo prve osnovne ideje Redux.

Povejte, v čem je bistvo druge osnovne ideje Redux.