Toevoegen van nog een slice in Redux

In eerdere lessen hebben we intensief gewerkt aan de slice products voor producten. In een echte Redux applicatie kunnen er veel slices in de state zitten voor verschillende doeleinden. Daarom voegen we in deze les nog een slice toe aan de state voor verkopers, die feitelijk de producten zullen toevoegen in onze applicatie.

Laten we onze applicatie met producten openen en het eerste wat we doen, is in de map parts nog een map aanmaken sellers, hier plaatsen we alle code en componenten die betrekking hebben op verkopers.

Nu, net zoals bij producten, laten we een slice voor verkopers maken. Om te beginnen maken we in de map sellers het bestand sellersSlice.js aan en importeren we daarin createSlice:

import { createSlice } from '@reduxjs/toolkit'

We gaan verder met de standaard stappen. Als beginwaarde voor de slice maken we vier verkopers. Voor de eenvoud hebben ze twee velden - 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 maken we met behulp van createSlice de slice sellers aan, we geven het de beginwaarde. Aangezien we noch verkopers zullen toevoegen, nor hun gegevens zullen bijwerken in de toekomst, laten we het veld met reducers voorlopig leeg:

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

Vergeet aan het einde van het bestand niet de export van de verkregen reducer:

export default sellersSlice.reducer

Nu moeten we het bestand store.js openen in de map app en de verkregen reducer importeren:

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

En het vervolgens in configureStore aanwijzen als reducer voor sellers:

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

Open je applicatie met studenten. Maak nog een map aan teachers, hier plaats je bestanden met code die betrekking hebben op docenten. Maak daarin het bestand teachersSlice.js aan. Gebruikmakend van de lesmaterialen, maak daarin de slice teachers aan met behulp van createSlice.

Laat elk object met gegevens van een leraar drie eigenschappen hebben: id, name (dat de achternaam en initialen bevat, bijvoorbeeld 'Petrov A.V.') en vak (welke dan ook, die je verzint - natuurkunde, wiskunde, biologie, etc.). Maak 3 van zulke objecten met leraren als beginwaarde voor de slice.

Importeer de verkregen reducer teachersReducer in store.js en wijs deze aan als reducer voor teachers, zoals getoond in de les.