Byvoeging van nog 'n slice in Redux

In vorige lesse het ons intensief gewerk aan die products slice vir produkte. In 'n regte Redux-app kan daar baie slices in die state wees vir verskeie doeleindes. Daarom sal ons in hierdie les nog 'n slice vir verkopers by die state voeg, wat in werklikheid die produkte in ons app sal byvoeg.

Laat ons ons app met produkte oopmaak en die eerste ding wat ons sal doen, is om in die gids parts 'n ander gids sellers te skep, hier sal ons al die kode en komponente plaas wat verkopers betref.

Nou, soos in die geval van produkte, laat ons 'n slice vir verkopers skep. Om te begin, skep in die gids sellers die lêer sellersSlice.js en voer createSlice daarin in:

import { createSlice } from '@reduxjs/toolkit'

Ons gaan voort met die standaard stappe. As beginwaarde vir die slice skep ons vier verkopers. Vir eenvoud sal hulle twee velde hê - id en name:

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

Hieronder, met behulp van createSlice, skep ons die slice sellers, gee aan dit die beginwaarde. Aangesien ons nie verkopers sal byvoeg nie, of hul data later sal opdateer nie, laat die veld met reducers leeg bly vir nou:

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

Aan die einde van die lêer moet ons nie die uitvoer vergeet nie van die verkrygde reducer:

export default sellersSlice.reducer

Nou moet ons die lêer store.js in die gids app oopmaak en die verkrygde reducer invoer:

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

En dan dit in configureStore aanwys as die reducer vir sellers:

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

Maak jou app met studente oop. Skep nog 'n gids teachers, hier sal jy lêers met kode hê wat onderwysers betref. Skep daarin die lêer teachersSlice.js. Gebruik die materiaal van die les om 'n slice teachers daarin te skep met behulp van createSlice.

Laat elke objek met data van 'n onderwyser drie eienskappe hê: id, name (wat die van en voorletters sal bevat, byvoorbeeld 'Pieterse A.V.') en vak (enige een wat jy kan bedink - fisika, wiskunde, biologie ens.). Maak 3 sulke objekte met onderwysers as beginwaarde vir die slice.

Voer die verkrygde reducer teachersReducer in store.js in en wys dit aan as die reducer vir teachers, soos in die les getoon.