Dwie podstawowe idee w Redux

Zanim zaczniemy naukę biblioteki Redux, zapoznajmy się z jej dwiema podstawowymi ideami. Pierwszą ideę, dotyczącą zarządzania stanem, rozważymy na przykładzie zwykłego licznika na stanie w 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>
	)
}

W tym kodzie widzimy stan dla zmiennej count - to jest źródło prawdy dla licznika. Następnie widzimy działanie (action) - zdarzenie, które po kliknięciu użytkownika wywołuje aktualizację stanu. I wreszcie, widok (view), za pomocą którego wyświetlamy interfejs użytkownika.

Zatem schemat jest dość prosty: przycisk jest naciśnięty - stan count (State) po naciśnięciu (Action) zmienia się, zatem zmienia się widok (View) - w naszym przypadku jest to liczba na ekranie.

Jednakże wszystko będzie bardziej skomplikowane, jeśli mamy wiele komponentów, które powinny używać tego samego stanu. Można oczywiście, na przykład wynieść stan w górę do komponentów rodzicielskich, ale takie rozwiązanie nie zawsze może rozwiązać problem. Redux w tym przypadku proponuje nam stworzenie jednego miejsca w aplikacji, które zawierałoby stan globalny oraz określone wzorce zachowań przy aktualizacji tego stanu. Właśnie na tym polega pierwsza podstawowa idea (!).

Druga idea związana jest z niemutowalnością, czyli z niezmiennością danych. Ty, oczywiście, pamiętasz z JavaScript, że tablice i obiekty można zmieniać. Zmiana danych bezpośrednio w Redux, tak jak w innych frameworkach, jest uważana za złą praktykę i może prowadzić do nieprzewidywalnych konsekwencji. Dlatego w Redux nasze początkowe obiekty i tablice powinny pozostać niemutowalne, a zmieniać możemy tylko ich kopie.

Opowiedz, na czym polega pierwsza podstawowa idea Redux.

Opowiedz, na czym polega druga podstawowa idea Redux.