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:

products/productsSlice.jsconst 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:

products/productsSlice.jsstate.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:

products/productsSlice.jsstate.products.push(action.payload)

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

products/productsSlice.jsconst currentProduct = state.find((product) => product.id === productId)

Ora sarà:

products/productsSlice.jsconst currentProduct = state.products.find((product) => product.id === productId)

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