Λήψη Selectors στο Redux

Μερικές φορές είναι πολύ χρήσιμο να απαλλαγούμε από τον περιττό κώδικα στην εφαρμογή, καθώς και να ενσωματώσουμε τα δεδομένα.

Ας ανοίξουμε την εφαρμογή προϊόντων μας. Παρατηρήστε ότι σε διάφορα σημεία της εφαρμογής, χρησιμοποιώντας selectors, ανακτούμε το slice των προϊόντων για να εκτελέσουμε κάποιες ενέργειες με αυτό.

Τώρα θα ανοίξουμε το productsSlice.js, θα κατεβούμε στο τέλος του αρχείου και θα προσθέσουμε μερικές γραμμές κώδικα, όπου θα γράψουμε δύο selectors και θα τα εξάγουμε. Μία συνάρτηση θα είναι για τη λήψη όλων των προϊόντων:

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

Και μετά από αυτήν, η δεύτερη - για τη λήψη ενός προϊόντος βάσει id:

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

Φυσικά μπορεί να έχετε μια δικαιολογημένη ερώτηση - από πού προέρχεται αυτή η περίπλοκη δομή: state.products.products; Η απάντηση είναι απλή, επειδή στο προηγούμενο μάθημα αλλάξαμε τη δομή του slice και τώρα τα προϊόντα μας θα βρίσκονται ως πίνακας σε μια ξεχωριστή ιδιότητα products του slice προϊόντων state.products (θυμηθείτε ότι εδώ state είναι το κεντρικό αντικείμενο κατάστασης του Redux, που περιέχει όλα τα slices).

Έτσι, απλώς μεταφέραμε τον κώδικα για τις συναρτήσεις-selectors σε ένα μέρος στην εφαρμογή και τώρα πρέπει να κάνουμε τις αντίστοιχες αλλαγές εκεί, όπου τις χρησιμοποιούσαμε. Ας ξεκινήσουμε με το αρχείο ProductsList.jsx. Θα εισάγουμε σε αυτό το selectAllProducts, αφού εδώ θα χρειαστεί να λάβουμε όλα τα προϊόντα:

import { selectAllProducts } from './productsSlice'

Και στην αρχή του κώδικα της συνάρτησης ProductsList, θα αντικαταστήσουμε:

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

Με τη γραμμή:

const products = useSelector(selectAllProducts)

Τώρα ας πάμε στο αρχείο ProductPage.jsx. Εδώ χρειαζόμασταν ένα προϊόν βάσει id. Θα αντικαταστήσουμε τη γραμμή (μην ξεχάσετε την εισαγωγή):

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

Με:

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

Κάντε μόνοι σας μια παρόμοια αντικατάσταση στο αρχείο EditProductForm.jsx. Εδώ χρειαζόμαστε επίσης ένα προϊόν βάσει id.

Θυμηθείτε, ότι μια τέτοια βελτιστοποίηση είναι μόνο για την ευκολία σας και μπορείτε να την κάνετε όταν τη θεωρήσετε απαραίτητη και βολική. Στο παράδειγμά μας, φανταστείτε ότι θα γράφαμε τον κώδικα της συνάρτησης-selector κάθε φορά σε διάφορα σημεία, και μετά θα αλλάζαμε τη δομή της κατάστασης, και τότε θα έπρεπε να τον διορθώσουμε σε όλα τα components.

Ανοίξτε την εφαρμογή σας με τους φοιτητές. Ανοίξτε σε αυτήν το αρχείο studentsSlice.js. Στο τέλος του αρχείου γράψτε και εξάγετε, όπως φαίνεται στο μάθημα, δύο selectors για τη λήψη όλων των φοιτητών selectAllStudents και για τη λήψη ενός φοιτητή βάσει id selectStudentById.

Τώρα εισάγετε τα selectAllStudents και selectStudentById στα αρχεία StudentsList.jsx, StudentPage.jsx και EditStudentForm.jsx, κάντε σε αυτά τα αρχεία τις αντίστοιχες αλλαγές, όπως φαίνεται στο μάθημα.