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:

parts/products/productsSlice.jsimport { 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:

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

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

parts/products/productsSlice.jsexport default productsSlice.reducer