Modifica della struttura dello stato in Redux

La prima fase che implementeremo per l'interazione della nostra applicazione Redux con un server esterno è il recupero dei dati memorizzati su di esso all'avvio dell'applicazione. Ma prima, apportiamo alcune modifiche alla nostra applicazione.

Apriamo la nostra applicazione di prodotti, e in essa il file productsSlice.js. Prestate attenzione alla definizione di initialState. Inizialmente la nostra slice dei prodotti productsSlice è un array che contiene oggetti (nel nostro caso due) con i dati dei prodotti. In primo luogo, poiché ora li caricheremo dal server, dobbiamo rimuoverli dal initialState. In secondo luogo, invieremo richieste API al server e sarà importante conoscere il loro stato. Tenendo conto di queste due cose, modifichiamo initialState. Che ora sia semplicemente un oggetto con i campi products (inizialmente qui non ci saranno dati, ma solo un array vuoto), status e error. Ora il nostro codice per initialState diventerà leggermente più breve:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Per ora abbiamo impostato lo stato 'idle' (inattività), dato che inizialmente non inviamo alcuna richiesta, ma in generale cambierà e potrà assumere valori 'loading', 'succeeded', 'failed'. Ricordate che per denotare lo stato potete scegliere i nomi che vi sono più convenienti.

Scendiamo più in basso nel codice. A seguito della modifica di initialState, dobbiamo cambiare anche il codice in cui lavoriamo con questo stato nelle funzioni reducer. Diamo un'occhiata al codice per productAdded:

state.push(action.payload)

Ora i nuovi prodotti li metteremo non semplicemente nello state dei prodotti, ma nella sua proprietà state.products. Pertanto, sostituiamo la riga sopra indicata con:

state.products.push(action.payload)

Di conseguenza, apportiamo le stesse modifiche per il reducer reactionClicked. Invece di:

const currentProduct = state.find((product) => product.id === productId)

Ora sarà:

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

Sostituite da soli state con state.products nel codice del reducer productUpdated.

Aprite la vostra applicazione con gli studenti. Aprite in essa il file studentsSlice.js. Fate in modo che il vostro initialState abbia tre proprietà: students, status, error - modificatele, come mostrato nella lezione.

Apportate le modifiche corrispondenti più in basso nel codice. Sostituite state con state.students nel codice per le vostre tre funzioni reducer.