Hinzufügen eines Slices zu Redux

Wir haben die grundlegenden Werkzeuge für die Erstellung unserer Redux-Anwendung vorbereitet, jetzt können wir direkt zur Implementierung ihrer Komponenten übergehen.

In dieser Lektion beginnen wir mit dem Konzept der Slices (slices). Eine Redux-Anwendung hat einen globalen State, der im Store gespeichert ist. Dieser State wird in Slices aufgeteilt. Tatsächlich ist ein Slice ein Teil des Stores, der den Ausgangsstate, die Reducer-Logik und die Actions für einen bestimmten Teil der Anwendung enthält.

In unserer Anwendung werden Produkte vorkommen, entsprechend wird der erste Slice, den wir erstellen, Informationen über Produkte enthalten. Beim Erstellen eines Slices muss außerdem der Reducer hinzugefügt werden, der weiß, wie diese Informationen zu verarbeiten sind.

Lasst uns in den Ordner src gehen und einen Ordner parts erstellen, und darin dann den Ordner products - hier werden wir alle Dateien mit Code ablegen, der sich auf Produkte bezieht. Im Ordner products erstellen wir die Datei productsSlice.js und importieren dann aus RTK die Funktion createSlice, mit deren Hilfe wir die Slices erstellen werden:

import { createSlice } from '@reduxjs/toolkit'

Jetzt erstellen wir den Slice für Produkte und nennen ihn 'products'. Für die Eigenschaft reducers lassen wir vorerst leere geschweifte Klammern:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Außerdem müssen wir den initialState definieren - den Ausgangszustand des Slice-States, der beim ersten Start der Anwendung geladen wird. Schreiben wir ihn direkt nach dem Import und vor der Erstellung des Slices. Lass es ein Array aus ein paar Objekten sein, die Produktdaten enthalten. Wir geben für jedes Produkt id, Titel, Beschreibung, Preis und Menge an:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Am Ende des Dateicodes nehmen wir aus dem Ergebnis der Funktion createSlice den von ihr generierten reducer und exportieren ihn. Er wird uns in anderen Dateien der Anwendung nützlich sein:

export default productsSlice.reducer

Öffnen Sie Ihre Anwendung für Studenten. Erstellen Sie darin die Datei studentsSlice.js, wie in der Lektion beschrieben. Erstellen Sie darin mit Hilfe von createSlice den Slice students. Als Ausgangswert des Slices soll ein Array aus ein paar Objekten dienen, die Daten von Studenten enthalten.

Machen Sie für jeden Studenten Felder: id, Vorname, Nachname, Alter und Fachrichtung.

Exportieren Sie am Ende der Datei studentsSlice.js den erhaltenen Reducer, wie in der Lektion beschrieben.