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:

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

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

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

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:

export default productsSlice.reducer

Hapni aplikacionin tuaj për studentë. Krijoni në të skedarin studentsSlice.js, siç përshkruhet në mësim. Krijoni në të me ndihmën e createSlice një slice students. Në cilësinë e vlerës fillestare të slice-it le të jetë një grup prej disa objektesh, që përmbajnë të dhëna të studentëve.

Për çdo student bëni fushat: id, emri, mbiemri, mosha dhe specialiteti.

Në fund të skedarit studentsSlice.js eksportoni reducer-in e përftuar, siç përshkruhet në mësim.