Vēl viena šķēles pievienošana Redux

Iepriekšējās nodarbībās mēs intensīvi strādājām ar produktu šķēli products. Reālā Redux lietotnē stāvoklī var būt daudz šķēļu dažādiem mērķiem. Tāpēc šajā nodarbībā mēs pievienosim stāvoklim vēl vienu šķēli pārdevējiem, kuri faktiski pievienos produktus mūsu lietotnē.

Atvērsim mūsu produktu lietotni un pirmā lieta, ko mēs darīsim, ir mapē parts izveidosim vēl vienu mapi sellers, šeit mēs ievietosim visu kodu un komponentes, kas attiecas uz pārdevējiem.

Tagad, tāpat kā produktu gadījumā, izveidosim šķēli pārdevējiem. Sākumā mapē sellers izveidosim failu sellersSlice.js un importēsim tajā createSlice:

import { createSlice } from '@reduxjs/toolkit'

Turpinām veikt standarta darbības. Kā sākotnējo vērtību šķēlei izveidosim četrus pārdevējus. Vienkāršības labad tiem būs divi lauki - id un name:

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

Zemāk, izmantojot createSlice, izveidosim šķēli sellers, padodam tai sākotnējo vērtību. Tā kā mēs nepievienosim pārdevējus, neatjaunināsim to datus turpmāk, tad lai lauks ar reduceriem pagaidām paliek tukšs:

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

Faila beigās neaizmirsīsim par eksportu iegūtā reducer:

export default sellersSlice.reducer

Tagad mums jāatver fails store.js mapē app un jāimportē iegūtais reducers:

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

Un tad piešķirt to configureStore kā reducer priekš sellers:

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

Atveriet savu studentu lietotni. Izveidojiet vēl vienu mapi teachers, šeit jums būs faili ar kodu, kas attiecas uz skolotājiem. Izveidojiet tajā failu teachersSlice.js. Izmantojot nodarbības materiālus, izveidojiet tajā šķēli teachers ar createSlice palīdzību.

Lai katram objektam ar datiem par skolotāju jums būtu trīs īpašības: id, name (kas satur uzvārdu un iniciālus, piemēram 'Petrovs A.V.') un mācību priekšmets (jebkuru, kādu izdomāsiet - fizika, matemātika, bioloģija utt.). Izveidojiet 3 šādus objektus ar skolotājiem kā sākotnējo vērtību šķēlei.

Importējiet iegūto reducer teachersReducer failā store.js un piešķiriet to kā reducer priekš teachers, kā parādīts nodarbībā.