Kry van selektore in Redux

Dit is soms baie nuttig om onnodige kode in die toepassing te verwyder, en ook data te inkapsuleer.

Kom ons maak ons toepassing met produkte oop. Let op dat ons op verskeie plekke in die toepassing, deur selektore te gebruik, die produk-slyk uittrek om een of ander aksie daarmee uit te voer.

En nou sal ons ons productsSlice.js oopmaak, na heel onder in die lêer afrol en 'n paar reëls kode byvoeg, waarin ons twee selektore sal skryf en dit sal uitvoer. Een funksie sal vir ons wees om alle produkte te kry:

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

En daarna die tweede een - om een produk volgens id te kry:

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

Natuurlik kan jy 'n regverdige vraag hê - waar kom so 'n kombinasie vandaan: state.products.products? Die antwoord is eenvoudig, ons het immers in die vorige les die struktuur van die slyk verander en nou sal ons produkte as 'n array in 'n afsonderlike eienskap products van die produk-slyk state.products wees (onthou dat hier state die wortelobjek van die Redux-toestand is, wat al die slyke bevat).

Sodoende het ons eenvoudig die kode vir die funksie-selektore na een plek in die toepassing geskuif en nou moet ons toepaslike veranderinge aanbring waar ons dit gebruik het. Kom ons begin met die lêer ProductsList.jsx. Laat ons daarin selectAllProducts invoer, want hier sal ons al die produkte nodig hê:

import { selectAllProducts } from './productsSlice'

En aan die begin van die funksie ProductsList se kode, vervang ons:

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

Met die reël:

const products = useSelector(selectAllProducts)

En nou gaan ons na die lêer ProductPage.jsx. Hier het ons 'n produk volgens id nodig gehad. Laat ons die reël vervang (moenie die invoer vergeet nie):

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

Met:

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

Doen self 'n soortgelyke vervanging in die lêer EditProductForm.jsx. Hier het ons ook 'n produk volgens id nodig.

Onthou dat so 'n optimalisering slegs vir jou gemak is en jy kan dit doen wanneer jy dit nodig en gerieflik ag. En in ons voorbeeld, dink net: ons sou die kode vir die funksie-selektor elke keer op verskillende plekke geskryf het, en dan sou ons die struktuur van die toestand verander, en dan sou ons dit in alle komponente moes regmaak.

Maak jou toepassing met studente oop. Maak daarin die lêer studentsSlice.js oop. Heel onder in die lêer, skryf en voer uit, soos in die les gewys, twee selektore vir die verkryging van alle studente selectAllStudents en vir die verkryging van een student volgens id selectStudentById.

Voer nou selectAllStudents en selectStudentById in die lêers StudentsList.jsx, StudentPage.jsx en EditStudentForm.jsx in, maak in hierdie lêers die toepaslike veranderinge, soos in die les gewys.