Две основни идеи в Redux

Преди да започнем изучаването на библиотеката Redux, нека се запознаем с двете й основни идеи. Първата идея, касаеща управлението на състоянието, ще разгледаме с примера на обикновен брояч със state в React:

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

В този код виждаме state за променливата count - това е източникът на истина за брояча. След това виждаме действие (action) - събитие, което при клик на потребителя причинява актуализация на state. И накрая, представяне (view), с което показваме потребителския интерфейс.

По този начин схемата е доста проста: бутонът се натиска - state count (State) при натискане (Action) се променя, следователно се променя представянето (View) - в нашия случай това е числото на екрана.

Въпреки това, всичко ще бъде по-сложно, ако имаме множество компоненти, които трябва да използват едно и също state. Може, разбира се, например да издигнем state нагоре до родителски компоненти, но такова решение не винаги може да реши проблема. Redux в този случай ни предлага да създадем едно място в приложението, което да съдържа глобалното състояние и определени модели на поведение при актуализиране на това състояние. Exactly in this и се състои първата основна идея (!).

Втората идея е свързана с имютабилност, тоест с неизменността на данните. Вие, разбира се, помните от JavaScript, че масиви и обекти могат да се променят. Промяната на данни директно в Redux, както и в други frameworks се счита за лош тон и може да доведе до непредсказуеми последствия. Затова в Redux нашите първоначални обекти и масиви трябва да останат имютабилни, а променять можем само техни копия.

Разкажете, в какво се състои първата основна идея на Redux.

Разкажете, в какво се състои втората основна идея на Redux.