Kaksi perusideaa Reduxissa

Ennen kuin aloitamme Redux-kirjaston opiskelun, tutustutaan kahteen sen perusideaansa. Ensimmäisen idean, joka koskee tilan hallintaa, tarkastelemme tavallisen laskurin avulla Reactin tilassa:

function Counter() {
	// Tila
	const [count, setCount] = useState(0)

	// Toiminto:
	function clickHandler() {
		setCount(count + 1)
	}

	// Näkymä:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

Tässä koodissa näemme tilan muuttujalle count - tämä on laskurin totuuden lähde. Sitten näemme toiminnon (action) - tapahtuman, joka käyttäjän napsautuksessa aiheuttaa tilan päivittämisen. Ja lopuksi, näkymän (view), jolla näytämme käyttöliittymän.

Siten kaavio on melko yksinkertainen: painiketta painetaan - tila count (State) painalluksesta (Action) muuttuu, näin ollen näkymä (View) muuttuu - meidän tapauksessamme se on numero näytöllä.

Kaikki on kuitenkin monimutkaisempaa, jos meillä on useita komponentteja, joiden on käytettävä samaa tilaa. Voimme tietysti esimerkiksi nostaa tilan yläpuolelle komponentteihin, mutta tällainen ratkaisu ei aina vähennä ongelmaa. Redux tarjoaa tässä tapauksessa mahdollisuuden luoda yhden paikan sovelluksessa, joka sisältää globaalin tilan ja tietyt käyttäytymismallit tämän tilan päivittämisen yhteydessä. Tässä juuri ensimmäinen perusidea piilee (!).

Toinen idea liittyy muuttumattomuuteen, eli datan pysyvyyteen. Muistat varmasti JavaScriptistä, että taulukoita ja olioita voidaan muuttaa. Datan muuttaminen suoraan Reduxissa, kuten muissakin kehyksissä, pidetään huonona tapana ja voi johtaa ennustamattomiin seurauksiin. Siksi Reduxissa alkuperäisten objektien ja taulukoiden tulee pysyä muuttumattomina, ja muutoksia voimme tehdä vain niiden kopioihin.

Kerro, mistä ensimmäinen perusidea Reduxissa koostuu.

Kerro, mistä toinen perusidea Reduxissa koostuu.