Adăugarea unui slice în Redux

Am pregătit instrumentele de bază pentru crearea aplicației noastre Redux, acum putem trece direct la implementarea componentelor sale.

În această lecție vom începe cu noțiunea de slice-uri (slices). Aplicația Redux are o singură stare globală care este stocată în store. Această stare este divizată în slice-uri. Practic, un slice este o bucățică a store-ului care conține starea inițială, logica reducer-ului și a acțiunilor pentru o anumită parte a aplicației.

În aplicația noastră vor figura produse, în consecință primul slice, pe care îl vom face, va conține informații despre produse. De asemenea, la crearea slice-ului este necesar să adăugăm un reducer care știe să proceseze aceste informații.

Să intrăm în folderul src și să creăm folderul parts, apoi în el folderul products - aici vom pune toate fișierele cu cod, referitoare la produse. În folderul products vom crea fișierul productsSlice.js, apoi vom importa în el din RTK funcția createSlice, cu ajutorul căreia vom crea slice-urile:

import { createSlice } from '@reduxjs/toolkit'

Acum să creăm un slice pentru produse și să îl numim 'products'. Pentru proprietatea reducers vom lăsa deocamdată acoladele goale:

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

De asemenea, trebuie să definim initialState - starea inițială a slice-ului de stare care va fi încărcată la prima pornire a aplicației. Să o scriem imediat după import și înainte de crearea slice-ului. Fie aceasta un array cu câteva obiecte care conțin date despre produse. Să indicăm pentru fiecare produs id, titlul, descrierea, prețul și cantitatea:

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',
	},
]

La sfârșitul codului fișierului, din rezultatul funcției createSlice vom lua reducer-ul generat de ea și îl vom exporta. El ne va fi util în alte fișiere ale aplicației:

export default productsSlice.reducer

Deschideți aplicația voastră pentru studenți. Creați în ea fișierul studentsSlice.js, după cum este descris în lecție. Creați în el cu ajutorul createSlice slice-ul students. În calitate de valoare inițială a slice-ului să fie un array cu câteva obiecte care conțin date despre studenți.

Pentru fiecare student faceți câmpurile: id, prenume, nume, vârsta și specialitatea.

La sfârșitul fișierului studentsSlice.js exportați reducer-ul obținut, după cum este descris în lecție.