Tilføjelse af endnu en slice i Redux

På tidligere lektioner har vi arbejdet intensivt med slicen products for produkter. I en rigtig Redux applikation kan der være mange slices i staten til forskellige formål. Derfor vil vi i denne lektion tilføje endnu en slice til staten for sælgere, som faktisk vil tilføje produkter i vores applikation.

Lad os åbne vores applikation med produkter og det første, vi gør, er at oprette en mappe mere sellers i mappen parts, her vil vi placere al kode og komponenter, der vedrører sælgere.

Nu, ligesom med produkterne, lad os oprette en slice for sælgere. Til at starte med, i mappen sellers, opretter vi filen sellersSlice.js og importerer createSlice i den:

import { createSlice } from '@reduxjs/toolkit'

Vi fortsætter med de standard trin. Som startværdi for slicen opretter vi fire sælgere. For enkelhedens skyld vil de have to felter - id og name:

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

Nedenfor, ved hjælp af createSlice, opretter vi slicen sellers, sender den startværdien. Da vi hverken vil tilføje sælgere eller opdatere deres data senere, lad feltet med reducere forblive tomt for nu:

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

I slutningen af filen glemmer vi ikke at eksportere den resulterende reducer:

export default sellersSlice.reducer

Nu er vi nødt til at åbne filen store.js i mappen app og importere den resulterende reducer:

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

Og derefter tildele den i configureStore som reducer for sellers:

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

Åbn din applikation med studerende. Opret endnu en mappe teachers, her vil du have filer med kode, der vedrører undervisere. Opret i den en fil teachersSlice.js. Brug materialerne fra lektionen til at oprette en slice teachers i den ved hjælp af createSlice.

Lad hvert objekt med data om læreren have tre egenskaber: id, name (som vil indeholde efternavn og initialer, for eksempel 'Petrov A.V.') og fag (ethvert, du finder på - fysik, matematik, biologi osv.). Lav 3 sådanne objekter med lærere som startværdi for slicen.

Importer den resulterende reducer teachersReducer i store.js og tildele den som reducer for teachers, som vist i lektionen.