Upataji wa Vichaguzi katika Redux

Wakati mwingine ni muhimu sana kuondoa msimbo uliozidi katika programu, na pia kuficha data.

Tufungue programu yetu ya bidhaa. Zingatia kwamba katika maeneo kadhaa ya programu, tukitumia vichaguzi, tunavuta kipande cha bidhaa ili kufanya shughuli fulani nazo.

Na sasa tutafungua faili yetu productsSlice.js, tushuke chini kabisa mwisho wa faili na tuongeze mistari kadhaa ya msimbo, ambayo tutaandika vichaguzi viwili na kuvihamisha nje. Kazi moja kati yetu itakuwa ya kupata bidhaa zote:

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

Na baada yake la pili - ya kupata bidhaa moja kwa kutumia kitambulisho (id):

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

Bila shaka swali la haki linaweza kutokea kwako - huu mpangilio umetoka wapi: state.products.products? Jibu ni rahisi, kwa sababu tulibadilisha muundo wa kipande tukiwa kwenye somo lilopita na sasa bidhaa zetu zitakuwapo kwenye muundo wa safu ndani ya sifa tofauti products ya kipande cha bidhaa state.products (kumbuka kwamba hapa state - huu ndio kituo kikuu cha hali ya Redux, ambacho kina vyote vipande).

Kwa hivyo tuhamishe msimbo wa kazi za kuchagua mahali pamoja katika programu na sasa tunahitaji kufanya mabadiliko yanayofaa pale, tulipotumia. Tuanze na faili ProductsList.jsx. Tuhamishe ndani yake selectAllProducts, kwa sababu hapa tunahitaji kupata bidhaa zote:

import { selectAllProducts } from './productsSlice'

Na mwanzo wa msimbo wa kazi ProductsList, tubadilishe:

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

Kwa mstari:

const products = useSelector(selectAllProducts)

Na sasa tuende kwenye faili ProductPage.jsx. Hapa tulihitaji bidhaa kwa kutumia kitambulisho (id). Tufanye ubadilishaji wa mstari (usisahau kuhusu kuhamisha ndani):

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

Kuwa:

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

Fanya ubadilishaji kama huo wewe mwenyewe kwenye faili EditProductForm.jsx. Hapa pia tunahitaji bidhaa kwa kutumia kitambulisho (id).

Kumbuka, uboreshaji kama huu ni kwa urahisi wako na unaweza kufanya huo unapoona inafaa na inafaa. Na kwenye mfano wetu fikiria kwamba tungeli kuwa tunaandika msimbo wa kazi ya kuchagua kila wakati kwenye maeneo tofauti, kisha tukabadilisha muundo wa hali, na basi ingelazimika kurekebisha katika sehemu zote.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili studentsSlice.js. Chini kabisa mwisho wa faili andika na uhamishe nje, kama inavyoonyeshwa kwenye somo, vichaguzi viwili vya kupata wanafunzi wote selectAllStudents na kwa kupata mwanafunzi mmoja kwa kutumia kitambulisho (id) selectStudentById.

Sasa hamisha ndani selectAllStudents na selectStudentById kwenye faili StudentsList.jsx, StudentPage.jsx na EditStudentForm.jsx, fanya mabadiliko yanayofaa kwenye faili hizi, kama inavyoonyeshwa kwenye somo.