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:

import { 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:

const 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:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

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

export default sellersSlice.reducer

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

import sellersReducer from '../parts/sellers/sellersSlice'

E poi assegnarlo in configureStore come reducer per sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Apri la tua applicazione con gli studenti. Crea un'altra cartella teachers, qui avrai i file con il codice riguardante i docenti. Creaci dentro un file teachersSlice.js. Utilizzando i materiali della lezione, creaci dentro uno slice teachers usando createSlice.

Lascia che ogni oggetto con i dati dell'insegnante abbia tre proprietà: id, name (che conterrà il cognome e le iniziali, ad esempio 'Petrov A.V.') e la materia (qualsiasi, che ti inventi - fisica, matematica, biologia, ecc.). Crea 3 di questi oggetti con insegnanti come valore iniziale per lo slice.

Importa il reducer ottenuto teachersReducer in store.js e assegnalo come reducer per teachers, come mostrato nella lezione.