Aggiunta di un altro slice in Redux

Nelle lezioni precedenti abbiamo lavorato intensamente sullo slice products per i prodotti. In un'applicazione Redux reale, lo stato può contenere molti slice per scopi diversi. Pertanto, in questa lezione aggiungeremo allo state un altro slice per i venditori, che in pratica sono coloro che aggiungeranno i prodotti nella nostra applicazione.

Apriamo la nostra applicazione sui prodotti e la prima cosa che faremo è, nella cartella parts creare un'altra cartella sellers, qui posizioneremo tutto il codice e i componenti riguardanti i venditori.

Ora, come nel caso dei prodotti, creiamo uno slice per i venditori. Per iniziare, nella cartella sellers creiamo il file sellersSlice.js e importiamo in esso createSlice:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Continuiamo con i passaggi standard. Come valore iniziale per lo slice creiamo quattro venditori. Per semplicità avranno due campi - id e name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Sotto, utilizzando createSlice, creiamo lo slice sellers, passiamogli il valore iniziale. Dato che non aggiungeremo venditori, né aggiorneremo i loro dati in seguito, lasciamo il campo dei reducer vuoto per ora:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

Alla fine del file, non dimentichiamo l'esportazione del reducer ottenuto:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Ora dobbiamo aprire il file store.js nella cartella app e importare il reducer ottenuto:

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

E poi assegnarlo in configureStore come reducer per sellers:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})