Terminologia de bază în Redux

În această lecție vom trece rapid în revistă conceptele și termenii de bază, a căror cunoaștere este necesară pentru studiul ulterior al Redux.

Vom începe cu acțiunea (action). Acesta este un eveniment care descrie ceea ce s-a întâmplat în aplicația noastră. Din punct de vedere tehnic, este un obiect JavaScript obiect obișnuit, conținând câmpul type, în care scriem numele acțiunii.

Al doilea câmp important al obiectului cu acțiune este câmpul payload. Acesta va conține încărcătura utilă acțiunii. Prin încărcătură utilă se înțelege unele date care sunt transmise ca parametri în acțiune.

De asemenea, în acest obiect pot fi și alte câmpuri cu informații suplimentare.

Să creăm, de exemplu, o acțiune și să o numim addOrderAction. Să fie responsabilă pentru adăugarea unei comenzi. Aceasta înseamnă că în proprietatea type vom specifica că comanda a fost adăugată (orderAdded) în comenzile (orders). Iar în payload vom specifica mai detaliat, ce comandă este, de exemplu - să vopsim un perete:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Pentru a nu scrie de fiecare dată obiectul cu acțiunea manual, putem folosi așa-numitul action creator - o funcție care va crea și va returna obiectul cu acțiunea. Să o numim addOrder. Ca parametru îi vom transmite textul necesar pentru proprietatea payload:

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

Următorul concept important în lanț este reducer (reducer) - o funcție care primește starea curentă și obiectul cu acțiunea. Această funcție decide cum să actualizeze starea și returnează starea deja actualizată, dacă este necesar.

Următorul concept - depozitul (store) - este un obiect în care este stocat starea globală curentă a aplicației Redux. Acest obiect are metoda getState, cu ajutorul căreia se poate obține valoarea curentă a stării.

Depozitul are și metoda dispatch. A o apela și a transmite un obiect cu acțiune - este singura modalitate de a modifica starea. În rezultat store-ul va rula funcția-reducer și va salva noua valoare a stării.

Și ultimul concept pe care îl vom analiza în această lecție - este selectorii. Selectorii - sunt funcții speciale, care știu cum să extragă informația din starea, aflată în depozit. Aceste funcții se dovedesc a fi deosebit de utile atunci când aplicația crește și ajută la evitarea repetării codului.

Mai multe despre toate aceste concepte și despre aplicarea lor în practică vom afla din secțiunile următoare ale acestui tutorial.