Aggiunta di uno slice in Redux

Abbiamo preparato gli strumenti di base per creare la nostra applicazione Redux, ora possiamo passare direttamente alla realizzazione dei suoi componenti.

In questa lezione inizieremo con il concetto slice (slices). Un'applicazione Redux ha un unico stato globale che viene memorizzato nello store. Questo stato viene suddiviso in slice. In pratica, uno slice è un frammento dello store, contenente lo stato iniziale, la logica dei reducer e delle azioni per una specifica parte dell'applicazione.

Nella nostra applicazione ci saranno dei prodotti, di conseguenza il primo slice, che creeremo, conterrà le informazioni sui prodotti. Inoltre, quando si crea uno slice è necessario aggiungere un reducer che sappia come elaborare queste informazioni.

Andiamo nella cartella src e creiamo la cartella parts, e poi al suo interno la cartella products - qui metteremo tutti i file con il codice relativo ai prodotti. Nella cartella products creeremo il file productsSlice.js, e poi importeremo in esso dalla RTK la funzione createSlice, con l'aiuto della quale creeremo gli slice:

import { createSlice } from '@reduxjs/toolkit'

Ora creiamo lo slice per i prodotti e chiamiamolo 'products'. Per la proprietà reducers per il momento lasciamo le parentesi graffe vuote:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Dobbiamo anche definire initialState - lo stato iniziale dello slice dello stato, che verrà caricato al primo avvio dell'applicazione. Scriviamolo subito dopo l'import e prima della creazione dello slice. Che sia un array di un paio di oggetti, contenenti i dati dei prodotti. Specifichiamo per ogni prodotto id, titolo, descrizione, prezzo e quantità:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Alla fine del codice del file, dal risultato della funzione createSlice prenderemo il reducer da essa generato e lo esporteremo. Ci sarà utile in altri file dell'applicazione:

export default productsSlice.reducer

Aprite la vostra applicazione per studenti. Create in essa il file studentsSlice.js, come descritto nella lezione. Create in esso con l'aiuto di createSlice lo slice students. Come valore iniziale dello slice che ci sia un array di un paio di oggetti, contenenti i dati degli studenti.

Per ogni studente create i campi: id, nome, cognome, età e specializzazione.

Alla fine del file studentsSlice.js esportate il reducer ottenuto, come descritto nella lezione.