Shtimi i një Slice në Redux

Ne kemi përgatitur mjetet kryesore për krijimin e aplikacionit tonë Redux, tani mund të kalojmë direkt në zbatimin e komponentëve të tij.

Në këtë sesion do të fillojmë me konceptin e slice-ve (slices). Aplikacioni Redux ka një state global të vetëm që ruhet në store. Ky state ndahet në slice-a. Në fakt, një slice është një pjesë e depozitës që përmban state-in fillestar, logjikën e reducers dhe actions për një pjesë të caktuar të aplikacionit.

Në aplikacionin tonë do të figurojnë produkte, në përputhje me rrethanat slice-i i parë, që ne do të krijojmë, do të përmbajë informacion rreth produkteve. Gjithashtu gjatë krijimit të një slice-i është e nevojshme të shtohet një reducer i cili e di se si të trajtojë këtë informacion.

Le të shkojmë në dosjen src dhe të krijojmë dosjen parts, dhe pastaj në të dosjen products - këtu do të vendosim të gjitha skedarët me kodin që i përkasin produkteve. Në dosjen products ne do të krijojmë skedarin productsSlice.js, dhe pastaj do të importojmë në të nga RTK funksionin createSlice, me ndihmën e së cilës ne do të krijojmë slice-a:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Tani le të krijojmë një slice për produktet dhe ta quajmë atë 'products'. Për vetinë reducers ne për tani do të lëmë kllapat kaçurrelë të zbrazëta:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

Gjithashtu ne duhet të përcaktojmë initialState - gjendjen fillestare të slice-it të state-it, e cila do të ngarkohet në fillim të nisjes së aplikacionit. Le ta shkruajmë atë menjëherë pas importit dhe para krijimit të slice-it. Le të jetë një grup prej disa objektësh, që përmbajnë të dhëna të produkteve. Le të përcaktojmë për çdo produkt id, emrin, përshkrimin, çmimin dhe sasinë:

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

Në fund të kodit të skedarit ne nga rezultati i funksionit createSlice do të marrim reducer-in e krijuar prej saj dhe do ta eksportojmë atë. Ai do të na duhet në skedarët e tjerë të aplikacionit:

parts/products/productsSlice.jsexport default productsSlice.reducer