Twee Basiese Idees in Redux

Voordat ons met die bestudering van die Redux-biblioteek begin, laat ons eers kennis maak met sy twee basiese idees. Die eerste idee, wat handel oor staatbestuur, sal ons aan die hand van 'n gewone teller op staat in React ondersoek:

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

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

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

In hierdie kode sien ons die staat vir die veranderlike count - dit is die bron van waarheid vir die teller. Dan sien ons aksie (action) - die gebeurtenis wat by 'n gebruikerskliek 'n opdatering van die staat veroorsaak. En laastens, aansig (view), waardeur ons die gebruikerskoppelvlak vertoon.

Die skema is dus redelik eenvoudig: 'n knoppie word gedruk - die staat count (State) word deur die druk (Action) verander, gevolglik verander die aansig (View) - in ons geval is dit die getal op die skerm.

Alles sal eger meer ingewikkeld wees as ons verskeie komponente het wat dieselfde staat moet gebruik. Ons kan natuurlik byvoorbeeld die staat oplig na ouerkomponente, maar so 'n oplossing kan nie altyd die probleem oplos nie. Redux bied in hierdie geval aan dat ons een plek in die toepassing skep wat die globale staat sal bevat en bepaalde gedragspatrone met die opdatering van hierdie staat. Dit is presies die eerste basiese idee (!).

Die tweede idee hou verband met onveranderlikheid, dit wil sê, die onveranderbaarheid van data. Jy sal natuurlik onthou uit JavaScript dat skikkings en voorwerpe verander kan word. Die direkte verandering van data in Redux, soos in ander raamwerke, word beskou as slegte styl en kan tot onvoorspelbare gevolge lei. Daarom moet ons oorspronklike voorwerpe en skikkings in Redux onveranderlik bly, en kan ons slegs hul kopieë verander.

Vertel, waarin lê die eerste basiese idee van Redux.

Vertel, waarin lê die tweede basiese idee van Redux.