Hinzufügen eines weiteren Slices zu Redux

In den vorherigen Lektionen haben wir intensiv am Slice products für Produkte gearbeitet. In einer echten Redux-Anwendung kann es im State viele Slices für verschiedene Zwecke geben. Daher werden wir in dieser Lektion einen weiteren Slice für Verkäufer zum State hinzufügen, die faktisch die Produkte in unserer Anwendung hinzufügen werden.

Öffnen wir unsere Produktanwendung und das Erste, was wir tun, ist, im Ordner parts einen weiteren Ordner sellers zu erstellen. Hier werden wir den gesamten Code und die Komponenten bezüglich der Verkäufer platzieren.

Nun, wie im Fall der Produkte, lasst uns einen Slice für die Verkäufer erstellen. Zunächst erstellen wir in dem Ordner sellers die Datei sellersSlice.js und importieren createSlice:

import { createSlice } from '@reduxjs/toolkit'

Wir setzen die standardmäßigen Schritte fort. Als Anfangswert für den Slice erstellen wir vier Verkäufer. Der Einfachheit halber haben sie zwei Felder - id und name:

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

Darunter erstellen wir mit createSlice den Slice sellers, übergeben ihm den Anfangswert. Da wir weder Verkäufer hinzufügen noch ihre Daten später aktualisieren werden, lasst uns das Feld mit den Reducern vorerst leer lassen:

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

Vergesst am Ende der Datei nicht den Export des erhaltenen Reducers:

export default sellersSlice.reducer

Nun müssen wir die Datei store.js im Ordner app öffnen und den erhaltenen Reducer importieren:

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

Und ihn dann in configureStore als Reducer für sellers zuweisen:

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

Öffnet eure Studentenanwendung. Erstellt einen weiteren Ordner teachers, hier werden sich eure Dateien mit dem Code bezüglich der Lehrkräfte befinden. Erstellt darin die Datei teachersSlice.js. Erstellt darin, unter Verwendung der Materialien der Lektion, den Slice teachers mit Hilfe von createSlice.

Jedes Objekt mit Daten eines Lehrers soll drei Eigenschaften haben: id, name (welches den Nachnamen und die Initialen enthalten soll, z.B. 'Petrov A.V.') und das Fach (ein beliebiges, das ihr euch ausdenkt - Physik, Mathematik, Biologie usw.). Erstellt 3 solcher Objekte mit Lehrern als Anfangswert für den Slice.

Importiert den erhaltenen Reducer teachersReducer in store.js und weist ihn als Reducer für teachers zu, wie in der Lektion gezeigt.