Podstawowe terminy w Redux

W tej lekcji krótko przejdziemy przez podstawowe pojęcia i terminy, których znajomość jest niezbędna przy dalszej nauce Redux.

Zaczniemy od akcji (action). Jest to pewne zdarzenie, które opisuje to, co wydarzyło się w naszej aplikacji. Technicznie jest to zwykły obiekt JavaScript obiekt, zawierający pole type, w które wpisujemy nazwę akcji.

Drugim ważnym polem obiektu z akcją jest pole payload. Będzie ono zawierać ładunek użytkowy akcji. Przez ładunek użytkowy rozumie się pewne dane, które są przekazywane jako parametry do akcji.

Również w tym obiekcie mogą znajdować się inne pola z dodatkowymi informacjami.

Stwórzmy dla przykładu akcję i nazwijmy ją addOrderAction. Niech odpowiada za dodanie zamówienia. Zatem we właściwości type wskażemy, że zamówienie zostało dodane (orderAdded) do zamówień (orders). A w payload podamy szczegóły, co to za zamówienie, na przykład - pomalować ścianę:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Pomalować ścianę'
}

Aby za każdym razem nie pisać obiektu z akcją ręcznie, możemy użyć tzw. action creator - funkcji, która będzie tworzyć i zwracać nam obiekt z akcją. Nazwijmy ją addOrder. Parametrem będziemy przekazywać jej potrzebny nam tekst dla właściwości payload:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Kolejnym ważnym pojęciem w łańcuchu jest reducer (reduktor) - funkcja, która przyjmuje bieżący stan i obiekt z akcją. Ta funkcja decyduje, jak zaktualizować stan i zwraca już zaktualizowany stan, jeśli jest to konieczne.

Następne pojęcie - magazyn (store) - jest to obiekt, w którym przechowywany jest bieżący globalny stan aplikacji Redux. Ten obiekt ma metodę getState, za pomocą której można uzyskać bieżącą wartość stanu.

Magazyn ma również metodę dispatch. Wywołanie jej i przekazanie obiektu z akcją - to jedyny sposób, aby zmienić stan. W wyniku magazyn uruchomi funkcję-reduktor i zapisze u siebie nową wartość stanu.

I ostatnie pojęcie, które rozważymy w tej lekcji - to selektory. Selektory - to specjalne funkcje, które wiedzą, jak wyodrębnić informacje ze stanu znajdującego się w magazynie. Te funkcje okazują się szczególnie przydatne przy rozroście aplikacji i pomagają uniknąć powtarzania kodu.

Więcej o wszystkich tych pojęciach i o zastosowaniu ich w praktyce dowiemy się z kolejnych rozdziałów tego podręcznika.