Sélecteurs et hook useSelector dans Redux

Lors des leçons précédentes, nous avons enregistré des données de produits dans le store. Comment les récupérer du store ?

Pour ce faire, nous devons écrire une fonction sélecteur. Cette fonction sait comment extraire une partie spécifique d'information de la valeur d'état stockée dans le store et aide à éviter d'écrire du code répétitif lorsque l'application se développe. En entrée, cette fonction prend l'état (state), et en sortie, elle renvoie la tranche d'état nécessaire. Par exemple ainsi :

const selectValue = state => state.some.value

Au tout début du manuel, il a été mentionné que le store possède une méthode getState. Et nous pourrions facilement l'utiliser pour obtenir la valeur de l'état :

const value = selectValue(store.getState())

Le problème est que nos composants React ne peuvent pas accéder directement au store, car il est interdit de l'importer dans le fichier du composant. Mais nous avons la possibilité d'obtenir les données dans le composant à l'aide du hook React-Redux useSelector. De plus, avec ce hook, nos composants recevront toujours des données actualisées :

const count = useSelector(selectValue)