Selectors en de useSelector Hook in Redux
In eerdere lessen hebben we gegevens over producten in de store opgeslagen. Hoe krijgen we ze uit de store?
Om dit te doen, moeten we een selector-functie schrijven. Deze functie weet hoe een specifiek stuk informatie uit de staatswaarde in de store gehaald moet worden en helpt herhalende code te vermijden wanneer de applicatie groeit. Als input neemt deze functie state, en als output geeft het de benodigde state slice. Bijvoorbeeld zo:
const selectValue = state => state.some.value
Helemaal aan het begin van de tutorial werd vermeld
dat de store een methode getState heeft. En we
zouden deze gemakkelijk kunnen gebruiken om
de staatswaarde te verkrijgen:
const value = selectValue(store.getState())
Het probleem is dat onze React
componenten niet direct toegang hebben tot de
store, omdat het verboden is deze te importeren
in het componentbestand. Maar we hebben de mogelijkheid
om gegevens in het component te verkrijgen met behulp van
de React-Redux hook useSelector. Bovendien,
met deze hook zullen onze componenten altijd
alleen de meest actuele gegevens ontvangen:
const count = useSelector(selectValue)
