Redux-ի երկու հիմնական գաղափարները

Նախքան Redux գրադարանն ուսումնասիրելը, եկեք ծանոթանանք նրա երկու հիմնական գաղափարներին: Առաջին գաղափարը, որը վերաբերում է վիճակի կառավարմանը, մենք կդիտարկենք React-ի սովորական հաշվիչի օրինակով վիճակի վրա.

function Counter() {
	// Վիճակ
	const [count, setCount] = useState(0)

	// Գործողություն.
	function clickHandler() {
		setCount(count + 1)
	}

	// Ներկայացում.
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

Այս կոդում մենք տեսնում ենք վիճակ count փոփոխականի համար - սա հաշվիչի ճշմարտության աղբյուրն է: Ապա մենք տեսնում ենք գործողություն (action) - իրադարձություն, որը օգտագործողի կտտոցով առաջացնում է վիճակի թարմացում: Եվ, վերջապես, ներկայացում (view), որի օգնությամբ մենք ցուցադրում ենք օգտատիրոջ ինտերֆեյսը:

Այսպիսով, սխեման բավականին պարզ է. կոճակը սեղմվում է - count վիճակը (State) սեղմման արդյունքում (Action) փոխվում է, հետևաբար փոխվում է ներկայացումը (View) - մեր դեպքում դա էկրանին երևացող թիվն է:

Սակայն, ամեն ինչ ավելի բարդ կլինի, եթե մենք ունենք բազմաթիվ բաղադրիչներ, որոնք պետք է օգտագործեն մեկ և նույն վիճակը: Միանգամայն հնարավոր է, օրինակ, բարձրացնել վիճակը դեպի ծնողական բաղադրիչներ, բայց նման լուծումը միշտ չէ, որ կարող է ազատել խնդրից: Redux-ն այս դեպքում առաջարկում է մեզ ստեղծել դիմումի մեջ մեկ տեղ, որը կպարունակի գլոբալ վիճակ և վիճակի այդ թարմացման ժամանակ որոշակի վարքագծի օրինաչափություններ: Հենց սրանում է կայանում առաջին հիմնական գաղափարը (!):

Երկրորդ գաղափարը կապված է իմուտաբելության, այսինքն՝ տվյալների անփոփոխելիության հետ: Դուք, անշուշտ, հիշում եք JavaScript-ից, որ զանգվածները և օբյեկտները կարելի է փոփոխել: Տվյալների ուղղակի փոփոխությունը Redux-ում, ինչպես նաև այլ ֆրեյմվորքներում, համարվում է վատ ոճ և կարող է հանգեցնել անկանխատեսելի հետևանքների: Ուստի Redux-ում մեր սկզբնական օբյեկտները և զանգվածները պետք է մնան իմուտաբել, իսկ փոփոխել կարող ենք միայն դրանց պատճենները:

Պատմեք, թե ինչում է կայանում Redux-ի առաջին հիմնական գաղափարը:

Պատմեք, թե ինչում է կայանում Redux-ի երկրորդ հիմնական գաղափարը: