Abrufen von Selektoren in Redux

Manchmal ist es sehr nützlich, überflüssigen Code in der Anwendung loszuwerden sowie Daten zu kapseln.

Lassen Sie uns unsere Produktanwendung öffnen. Beachten Sie, dass wir an mehreren Stellen der Anwendung unter Verwendung von Selektoren den Produkt-Slice herausziehen, um einige Aktionen damit durchzuführen.

Jetzt öffnen wir unsere productsSlice.js, gehen ans Ende der Datei und fügen ein paar Codezeilen hinzu, in denen wir zwei Selektoren schreiben und exportieren. Eine Funktion wird für das Abrufen aller Produkte sein:

export const selectAllProducts = (state) => state.products.products

Und danach eine zweite - für das Abrufen eines einzelnen Produkts nach id:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Sicherlich können Sie berechtigterweise fragen - woher haben wir so eine Konstruktion: state.products.products? Die Antwort ist einfach, wir haben in der letzten Lektion die Struktur des Slices geändert und jetzt werden unsere Produkte als Array in einer separaten Eigenschaft products des Produkt-Slices state.products liegen (denken Sie daran, dass hier state das Root-Objekt des Redux-State ist, das alle Slices enthält).

So haben wir einfach den Code für die Selektoren-Funktionen an einen Ort in der Anwendung verschoben und müssen jetzt entsprechende Änderungen dort vornehmen, wo wir sie verwendet haben. Beginnen wir mit der Datei ProductsList.jsx. Importieren wir darin selectAllProducts, da wir hier alle Produkte abrufen müssen:

import { selectAllProducts } from './productsSlice'

Und ersetzen wir am Anfang des Codes der Funktion ProductsList:

const products = useSelector((state) => state.products)

Durch die Zeile:

const products = useSelector(selectAllProducts)

Jetzt gehen wir zur Datei ProductPage.jsx. Hier brauchten wir ein Produkt nach id. Ersetzen wir die Zeile (vergessen Sie den Import nicht):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Durch:

const product = useSelector((state) => selectProductById(state, productId))

Nehmen Sie eine ähnliche Ersetzung selbst in der Datei EditProductForm.jsx vor. Hier brauchen wir ebenfalls ein Produkt nach id.

Denken Sie daran, dass eine solche Optimierung nur für Ihre Bequemlichkeit ist und Sie sie durchführen können, wenn Sie sie für nötig und praktisch halten. Stellen Sie sich in unserem Beispiel vor, wir hätten den Code der Selektoren-Funktion jedes Mal an verschiedenen Stellen geschrieben, und dann hätten wir die Struktur des States geändert, und man müsste ihn dann in allen Komponenten korrigieren.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei studentsSlice.js. Ganz unten in der Datei schreiben und exportieren Sie, wie in der Lektion gezeigt, zwei Selektoren für das Abrufen aller Studenten selectAllStudents und für das Abrufen eines einzelnen Studenten nach id selectStudentById.

Importieren Sie nun selectAllStudents und selectStudentById in die Dateien StudentsList.jsx, StudentPage.jsx und EditStudentForm.jsx, nehmen Sie in diesen Dateien entsprechende Änderungen vor, wie in der Lektion gezeigt.