Kito skilčio pridėjimas Redux

Ankstesnėse pamokose mes daug dirbome su produkto skiltimi products. Realioje Redux programoje būsenoje gali būti daug skilčių įvairiems tikslams. Todėl šioje pamokoje mes pridėsime į būseną kitą skiltį pardavėjams, kurie faktiškai pridės produktus mūsų programoje.

Atidarykime mūsų programą su produktais ir pirmas dalykas, kurį mes padarysime, tai aplanke parts sukursime kitą aplanką sellers, čia mes talpinsime visą kodą ir komponentus, susijusius su pardavėjais.

Dabar, kaip ir su produktais, sukurkime skiltį pardavėjams. Pradžiai aplanke sellers sukurkime failą sellersSlice.js ir importuokime į jį createSlice:

import { createSlice } from '@reduxjs/toolkit'

Tęsiame standartinius veiksmus. Kaip pradinę skilties reikšmę sukurkime keturis pardavėjus. Dėl paprastumo jie turės du laukus - id ir name:

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

Žemiau naudodami createSlice sukurkime skiltį sellers, perduokime jam pradinę reikšmę. Kadangi mes neplanuojame nei pridėti pardavėjų, nei atnaujinti jų duomenų vėliau, tai tegul laukas su reducers pas mus kol kas lieka tuščias:

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

Failo pabaigoje nepamirškime apie eksportą gauto reducer:

export default sellersSlice.reducer

Dabar mums reikia atidaryti failą store.js aplanke app ir importuoti gautą reducer:

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

Ir tada priskirti jį configureStore kaip reducer sellers:

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

Atidarykite savo programą su studentais. Sukurkite kitą aplanką teachers, čia bus failai su kodu, susijusiu su dėstytojais. Sukurkite jame failą teachersSlice.js. Naudodamiesi medžiaga iš pamokos, sukurkite jame skiltį teachers naudodami createSlice.

Tegul kiekvienas objektas su duomenimis mokytojo turi tris savybes: id, name (kuri talpins pavardę ir inicialus, pavyzdžiui 'Petrov A.V.') ir dalykas (bet kurį, kokį sugalvosite - fizika, matematika, biologija ir pan.). Sukurkite 3 tokius objektus su mokytojais kaip pradinę skilties reikšmę.

Importuokite gautą reducer teachersReducer į store.js ir priskirkite jį kaip reducer teachers, kaip parodyta pamokoje.