Obținerea selectorilor în Redux

Uneori este foarte util să scapi de codul redundant în aplicație, precum și să încapsulezi datele.

Să deschidem aplicația noastră cu produse. Atenție, că în mai multe locuri aplicației noi, folosind selectori, extragem slice-ul cu produse pentru a efectua niște acțiuni cu el.

Iar acum vom deschide fișierul nostru productsSlice.js, vom coborî până la sfârșitul fișierului și vom adăuga câteva rânduri de cod, în care vom scrie doi selectori și îi vom exporta. O funcție va fi pentru obținerea tuturor produselor:

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

Și după aceea a doua - pentru obținerea unui produs după id:

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

Desigur, vă poate apărea o întrebare justificată - de unde avem o astfel de structură: state.products.products? Răspunsul este simplu, noi la lecția trecută am schimbat structura slice-ului și acum produsele noastre vor fi situate sub formă de array într-o proprietate separată products a slice-ului produselor state.products (amintiți-vă că aici state este obiectul rădăcină al stării Redux, care conține toate slice-urile).

Astfel, noi pur și simplu am mutat codul pentru funcțiile-selector într-un singur loc în aplicație și acum trebuie să facem modificările corespunzătoare acolo, unde le-am folosit. Vom începe cu fișierul ProductsList.jsx. Vom importa în el selectAllProducts, deoarece aici ne trebuie să obținem toate produsele:

import { selectAllProducts } from './productsSlice'

Și la începutul codului funcției ProductsList, vom înlocui:

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

Cu linia:

const products = useSelector(selectAllProducts)

Iar acum să trecem la fișierul ProductPage.jsx. Aici ne trebuia un produs după id. Să facem înlocuirea liniei (nu uitați de import):

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

Cu:

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

Faceți singuri o înlocuire similară în fișierul EditProductForm.jsx. Aici ne trebuie de asemenea un produs după id.

Amintiți-vă, că o astfel de optimizare este doar pentru confortul vostru și o puteți face atunci când o considerați necesară și convenabilă. Iar în exemplul nostru imaginați-vă că am fi scris codul funcției-selector de fiecare dată în locuri diferite, iar apoi am fi schimbat structura stării, și ar fi trebuit să o corectăm atunci în toate componentele.

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul studentsSlice.js. La sfârșitul fișierului scrieți și exportați, așa cum se arată în lecție, doi selectori pentru obținerea tuturor studenților selectAllStudents și pentru obținerea unui student după id selectStudentById.

Acum importați selectAllStudents și selectStudentById în fișierele StudentsList.jsx, StudentPage.jsx și EditStudentForm.jsx, faceți în aceste fișiere modificările corespunzătoare, așa cum se arată în lecție.