Ottenere i Selettori in Redux

A volte è molto utile eliminare il codice superfluo nell'applicazione, nonché incapsulare i dati.

Apriamo la nostra applicazione con i prodotti. Si noti che in diversi punti dell'applicazione, utilizzando i selettori, estraiamo lo slice dei prodotti per compiere alcune azioni su di esso.

E ora apriamo il nostro productsSlice.js, scendiamo alla fine del file e aggiungiamo un paio di righe di codice, in cui scriveremo due selettori e li esporteremo. Una funzione sarà per ottenere tutti i prodotti:

export const selectAllProducts = (state) => state.products.products

E dopo di essa la seconda - per ottenere un prodotto per id:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Certo, potrebbe sorgere una domanda legittima: da dove viene questa complessità: state.products.products? La risposta è semplice, nell'ultima lezione abbiamo cambiato la struttura dello slice e ora i nostri prodotti si troveranno come array in una proprietà separata products dello slice dei prodotti state.products (ricorda che qui state è l'oggetto root dello stato Redux, che contiene tutti gli slice).

In questo modo, abbiamo semplicemente spostato il codice per le funzioni selettore in un unico luogo nell'applicazione e ora dobbiamo apportare le modifiche corrispondenti lì, dove le abbiamo utilizzate. Iniziamo con il file ProductsList.jsx. Importiamo in esso selectAllProducts, poiché qui dovremo ottenere tutti i prodotti:

import { selectAllProducts } from './productsSlice'

E all'inizio del codice della funzione ProductsList, sostituiamo:

const products = useSelector((state) => state.products)

Con la riga:

const products = useSelector(selectAllProducts)

E ora passiamo al file ProductPage.jsx. Qui ci serviva un prodotto per id. Sostituiamo la riga (non dimenticare l'import):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Con:

const product = useSelector((state) => selectProductById(state, productId))

Esegui tu stesso una sostituzione simile nel file EditProductForm.jsx. Qui ci serve anche un prodotto per id.

Ricorda che questa ottimizzazione è solo per tua comodità e puoi farla quando la ritieni necessaria e conveniente. Nel nostro esempio, immagina se avessimo scritto il codice della funzione selettore ogni volta in luoghi diversi, e poi avessimo cambiato la struttura dello stato, e dovessimo quindi correggerlo in tutti i componenti.

Apri la tua applicazione con gli studenti. Al suo interno, apri il file studentsSlice.js. In fondo al file, scrivi ed esporta, come mostrato nella lezione, due selettori per ottenere tutti gli studenti selectAllStudents e per ottenere uno studente per id selectStudentById.

Ora importa selectAllStudents e selectStudentById nei file StudentsList.jsx, StudentPage.jsx e EditStudentForm.jsx, apporta in questi file le modifiche corrispondenti, come mostrato nella lezione.