Teise lõigu lisamine Redux'i

Eelmistel tundidel tegime põhjalikult tööd toodete lõiguga products. Reaalses Redux rakenduses võib olekus olla palju lõike erinevatel eesmärkidel. Seetõttu lisame sellel tunnil olekusse veel ühe lõigu müüjate jaoks, kes tegelikult lisavad tooteid meie rakenduses.

Avame oma tooterakenduse ja esimese asjana loome kaustas parts veel ühe kausta sellers, siia paigutame kogu müüjaid puudutava koodi ja komponendid.

Nüüd, nagu toodete puhul, loome müüjate jaoks lõigu. Alustuseks loome kaustas sellers faili sellersSlice.js ja impordime sinna createSlice:

import { createSlice } from '@reduxjs/toolkit'

Jätkame standardsete sammudega. Algväärtusena loome neli müüjat. Lihtsuse mõttes on neil kaks välja - id ja name:

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

Allpool loome abiga createSlice lõigu sellers, edastame sellele algväärtuse. Kuna me ei hakka müüjaid lisama ega nende andmeid uuendama, siis jäägu väli redutseritega hetkel tühjaks:

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

Faili lõpus ärgem unustagem eksporti saadud redutserist:

export default sellersSlice.reducer

Nüüd peame avama faili store.js kaustas app ja importima saadud redutseri:

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

Ja seejärel määrama selle configureStore-s redutseriks võtmele sellers:

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

Avage oma õpilaste rakendus. Looge veel üks kaust teachers, siia paigutage õpetajaid puudutavad failid koodiga. Looge sinna fail teachersSlice.js. Kasutades tunni materjale, looge selles lõik teachers abil createSlice.

Olgu igal õpetaja andmete objektil kolm omadust: id, name (mis sisaldab perekonnanime ja initsiaale, näiteks 'Petrov A.V.') ja aine (ükskõik milline, mille välja mõtlete - füüsika, matemaatika, bioloogia jne). Looge 3 sellist õpetajate objekti algväärtusena lõigule.

Importige saadud redutser teachersReducer faili store.js ja määrake see redutseriks võtmele teachers, nagu on näidatud tunnis.