Termini Fondamentali in Redux

In questa lezione passeremo brevemente in rassegna i concetti e i termini fondamentali, la cui conoscenza è necessaria per lo studio successivo di Redux.

Inizieremo con la azione (action). Si tratta di un evento che descrive ciò che è accaduto nella nostra applicazione. Tecnicamente è un normale oggetto JavaScript, contenente un campo type, in cui scriviamo il nome dell'azione.

Il secondo campo importante dell'oggetto azione è il campo payload. Esso conterrà il carico utile dell'azione. Per carico utile si intendono alcuni dati che vengono passati come parametri all'azione.

In questo oggetto possono anche esserci altri campi con informazioni aggiuntive.

Creiamo un'azione come esempio e chiamiamola addOrderAction. Supponiamo che sia responsabile di aggiungere un ordine. Quindi nella proprietà type indicheremo che l'ordine è stato aggiunto (orderAdded) agli ordini (orders). E in payload specifichiamo meglio che tipo di ordine, ad esempio - dipingere un muro:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Dipingi un muro'
}

Per non dover scrivere manualmente ogni volta l'oggetto azione, possiamo utilizzare il cosiddetto action creator - una funzione che crea e restituisce l'oggetto azione. Chiamiamola addOrder. Come parametro le passeremo il testo desiderato per la proprietà payload:

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

Il concetto successivo importante nella catena è il reducer (riduttore) - una funzione che accetta lo stato corrente e l'oggetto azione. Questa funzione decide come aggiornare lo stato e restituisce lo stato già aggiornato, se necessario.

Il concetto successivo è lo store (store) - un oggetto in cui è memorizzato lo stato globale corrente dell'applicazione Redux. Questo oggetto ha un metodo getState, utilizzando il quale è possibile ottenere il valore corrente dello stato.

Lo store ha anche un metodo dispatch. Chiamarlo e passare l'oggetto azione è l'unico modo per modificare lo stato. Di conseguenza lo store eseguirà la funzione reducer e salverà il nuovo valore dello stato.

E l'ultimo concetto che esamineremo in questa lezione sono i selettori. I selettori sono funzioni speciali, che sanno come estrarre informazioni dallo stato situato nello store. Queste funzioni si rivelano particolarmente utili quando l'applicazione cresce e aiutano a evitare la ripetizione del codice.

Maggiori dettagli su tutti questi concetti e sul loro utilizzo pratico li apprenderemo nelle sezioni successive di questo tutorial.