Shtimi i një slice tjetër në Redux

Në mësimet e mëparshme kemi punuar intensivisht mbi slice-in products për produktet. Në një aplikacion real Redux, në state mund të ketë shumë slice-a për qëllime të ndryshme. Prandaj në këtë mësim do të shtojmë në state një slice tjetër për shitësit, të cilët në fakt do të shtojnë produktet në aplikacionin tonë.

Le të hapim aplikacionin tonë me produktet dhe gjëja e parë që do të bëjmë është që në dosjen parts të krijojmë një dosje tjetër sellers, këtu do të vendosim të gjithë kodin dhe komponentët, që kanë të bëjnë me shitësit.

Tani, njësoj si me rastin e produkteve, le të krijojmë një slice për shitësit. Për fillim, në dosjen sellers le të krijojmë skedarin sellersSlice.js dhe të importojmë në të createSlice:

import { createSlice } from '@reduxjs/toolkit'

Vazhdojmë me hapat standardë. Si vlerë fillestare për slice-in le të krijojmë katër shitës. Për thjeshtësi, ata do të kenë dy fusha - id dhe name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

Më poshtë, me ndihmën e createSlice le të krijojmë slice-in sellers, t'i japim atij vlerën fillestare. Meqë nuk do të shtojmë shitës, as do të përditësojmë të dhënat e tyre më tej, le të mbetet fusha me reducer-ët bosh për tani:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Në fund të skedarit le të mos harrojmë eksportin e reducer-it të përftuar:

export default sellersSlice.reducer

Tani duhet të hapim skedarin store.js në dosjen app dhe të importojmë reducer-in e përftuar:

import sellersReducer from '../parts/sellers/sellersSlice'

Dhe pastaj ta caktojmë atë në configureStore si reducer për sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Hapni aplikacionin tuaj me studentët. Krijoni një dosje tjetër teachers, këtu do të keni skedarë me kod, që kanë të bëjnë me mësuesit. Krijoni në të skedarin teachersSlice.js. Duke përdorur materialet e mësimit, krijoni në të slice-in teachers me ndihmën e createSlice.

Le të çdo objekti me të dhëna të mësuesit të ketë tre veti: id, name (e cila do të përmbajë mbiemrin dhe inicialet, p.sh. 'Petrov A.V.') dhe lëndën (cilëdo që të mendoni - fizikë, matematikë, biologji etj.). Krijoni 3 objekte të tillë me mësues në cilësi të vlerës fillestare për slice-in.

Importoni reducer-in e përftuar teachersReducer në store.js dhe caktojeni atë si reducer për teachers, siç tregohet në mësim.