Obtention de sélecteurs dans Redux

Il est parfois très utile de se débarrasser du code superflu dans une application, ainsi que d'encapsuler les données.

Ouvrons notre application avec les produits. Remarquez qu'à plusieurs endroits de l'application, nous utilisons des sélecteurs pour extraire le slice des produits afin d'effectuer certaines actions avec.

Et maintenant, ouvrons notre productsSlice.js, descendons tout en bas du fichier et ajoutons quelques lignes de code, dans lesquelles nous écrirons deux sélecteurs et nous les exporterons. Une fonction sera pour obtenir tous les produits :

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

Et après celle-ci, une seconde - pour obtenir un produit par son id :

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

Bien sûr, une question légitime peut vous venir à l'esprit - pourquoi avons-nous cette imbrication : state.products.products ? La réponse est simple, rappelez-vous, lors de la leçon précédente, nous avons modifié la structure du slice et maintenant nos produits se trouveront sous forme de tableau dans une propriété distincte products du slice des produits state.products (souvenez-vous que ici state est l'objet racine de l'état Redux, qui contient tous les slices).

Ainsi, nous avons simplement déplacé le code pour les fonctions-sélecteurs vers un seul endroit dans l'application et maintenant nous devons apporter les modifications correspondantes aux endroits où nous les utilisions. Commençons par le fichier ProductsList.jsx. Importons-y selectAllProducts, puisque ici nous avons besoin d'obtenir tous les produits :

import { selectAllProducts } from './productsSlice'

Et au début du code de la fonction ProductsList, remplaçons :

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

Par la ligne :

const products = useSelector(selectAllProducts)

Et maintenant, passons au fichier ProductPage.jsx. Ici nous avions besoin d'un produit par son id. Faisons le remplacement de la ligne (n'oubliez pas l'import) :

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

Par :

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

Faites vous-même un remplacement similaire dans le fichier EditProductForm.jsx. Ici nous avons également besoin d'un produit par son id.

Rappelez-vous qu'une telle optimisation est uniquement pour votre commodité et vous pouvez la faire quand vous la jugerez nécessaire et pratique. Sur notre exemple, imaginez que nous aurions écrit le code de la fonction-sélecteur à chaque fois dans différents endroits, puis que nous aurions changé la structure du state, et qu'il aurait alors fallu le corriger dans tous les composants.

Ouvrez votre application avec les étudiants. Ouvrez-y le fichier studentsSlice.js. Tout en bas du fichier, écrivez et exportez, comme montré dans la leçon, deux sélecteurs pour obtenir tous les étudiants selectAllStudents et pour obtenir un étudiant par son id selectStudentById.

Maintenant, importez selectAllStudents et selectStudentById dans les fichiers StudentsList.jsx, StudentPage.jsx et EditStudentForm.jsx, apportez dans ces fichiers les modifications correspondantes, comme montré dans la leçon.