Selektoren und der useSelector-Hook in Redux
In den vorherigen Lektionen haben wir Daten von Produkten im store gespeichert. Wie bekommen wir sie nun aus dem store?
Um dies zu tun, müssen wir eine Selektor-Funktion schreiben. Diese Funktion weiß, wie man einen bestimmten Teil der Informationen aus dem im store gespeicherten Zustandswert extrahiert und hilft, redundanten Code zu vermeiden, wenn die Anwendung wächst. Als Eingabe erhält diese Funktion den state, und als Ausgabe gibt sie den benötigten Teil des Zustands zurück. Zum Beispiel so:
const selectValue = state => state.some.value
Ganz zu Beginn des Lehrbuchs wurde erwähnt,
dass der store eine Methode getState hat. Und wir
hätten sie leicht nutzen können, um
den Zustandswert zu erhalten:
const value = selectValue(store.getState())
Das Problem besteht darin, dass unsere React-
Komponenten nicht direkt auf den
store zugreifen können, da es verboten ist, ihn
in die Komponentendatei zu importieren.
Aber wir haben die Möglichkeit,
Daten in der Komponente mit Hilfe
des React-Redux Hooks useSelector zu erhalten. Außerdem
erhalten unsere Komponenten mit diesem Hook immer
nur aktuelle Daten:
const count = useSelector(selectValue)
