Επιλογείς και το Hook useSelector στο Redux

Στα προηγούμενα μαθήματα καταγράψαμε στο store δεδομένα προϊόντων. Πώς μπορούμε να τα λάβουμε από το store;

Για να το κάνουμε αυτό, πρέπει να γράψουμε μια συνάρτηση-επιλογέα. Αυτή η συνάρτηση ξέρει πώς να εξάγει ένα συγκεκριμένο κομμάτι πληροφορίας από την τιμή της κατάστασης που είναι αποθηκευμένη στο store και βοηθά στην αποφυγή επαναλαμβανόμενου κώδικα καθώς η εφαρμογή μεγαλώνει. Ως είσοδο αυτή η συνάρτηση δέχεται το state, και ως έξοδο επιστρέφει το απαραίτητο τμήμα της κατάστασης. Για παράδειγμα έτσι:

const selectValue = state => state.some.value

Στην αρχή του εγχειριδίου αναφέρθηκε ότι το store έχει μια μέθοδο getState. Και εμείς θα μπορούσαμε εύκολα να τη χρησιμοποιήσουμε για να πάρουμε την τιμή της κατάστασης:

const value = selectValue(store.getState())

Το πρόβλημα είναι ότι τα React components μας δεν μπορούν να έχουν απευθείας πρόσβαση στο store, αφού απαγορεύεται να εισαχθεί στο αρχείο του component. Αλλά έχουμε τη δυνατότητα να λάβουμε δεδομένα στο component χρησιμοποιώντας το React-Redux hook useSelector. Επιπλέον, με αυτό το hook τα components μας θα λαμβάνουν πάντα μόνο τα πιο πρόσφατα δεδομένα:

const count = useSelector(selectValue)