Redux-да иккита асосий ғоя

Redux kutubxonasini ўрганишни бошлашдан олдин, келинг, унинг иккита асосий ғояси билан танишайлик. Биринчи ғоя, ҳолатни бошқаришга оид, биз React-даги oddiy ҳисобловчи мисолида кўриб чиқамиз:

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

Ушбу кодда биз count ўзгарувчиси учун стейтни кўрамиз - бу ҳисобловчи учун ҳақиқат манбаи. Кейин биз ҳаракатни (action) кўрамиз - фойдаланувчи клик қилганида стейтни янгилашни чақирувчи воқеа. Ва, ниҳоят, тасвир (view), орқали биз фойдаланувчи интерфе́йсини кўрсатамиз.

Демак, схема жуда оддий: тугма босилди - count стейти (State) босилганда (Action) ўзгаради, натижада тасвир (View) ўзгаради - бизнинг ҳолимизда бу экрандаги рақам.

Бирок, бир хил стейтдан фойдаланиши керак бўлган кўп компонентлар бўлса, ҳамма нароз мураккаб бўлади. Албатта, масалан, стейтни ота-она компонентларга кўтариш мумкин, аммо бундай ечим ҳамиша muammoдан халос қила олмайди. Redux бу ҳолатда бизга иловада глобал ҳолатни ўз ичига олган бирор жой яратиш ва ушбу ҳолат янгиланганда муайян ишлаш намуналарини белгилашни таклиф этади. Айнан шу биринчи асосий ғоядир (!).

Иккинчи ғоя иммутабельность, яъни маълумотларнинг ўзгармаслиги билан боглик. Сиз, албатта, JavaScript-дан эслайсизки, массивлар ва объектлар ўзгартирилиши мумкин. Маълумотларни тўғридан-тўғри ўзгартириш Redux-да, бошқа фреймворклар каби, ёмон одат ҳисобланади ва кутилмаган оқибатларга олиб келиши мумкин. Шу сабабдан Redux-да бизнинг бошланғич объект ва массивларимиз иммутабель бўлиб қолиши керак, ўзгартириш эса фақат уларнинг нусхаларига қўлланилиши лозим.

Redux-нинг биринчи асосий ғояси nimadan иборат эканлигини тушантиринг.

Redux-нинг иккинчи асосий ғояси nimadan иборат эканлигини тушантиринг.