Redux හි තෝරාගැනීම් ලබා ගැනීම

සමහර විට යෙදුමෙන් අනවශ්‍ය කේතය ඉවත් කිරීම, සහ දත්ත කේතීකරණය කිරීම ඉතා ප්‍රයෝජනවත් වේ.

අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු. යෙදුමේ නිශ්චිත ස්ථාන කිහිපයක, අපි තෝරාගැනීම් භාවිතා කරමින් නිෂ්පාදන කැබැල්ල ඇදගෙන යන බව සටහන් කර ගන්න, එය සමඟ ක්‍රියාමාර්ගයක් ගැනීමට.

දැන් අපි අපගේ productsSlice.js විවෘත කරමු, ගොනුවේ අවසානයට පහළට ගොස්, කේත පේළි කිහිපයක් එකතු කරමු, එහිදී අපි තෝරාගැනීම් දෙකක් ලියා ඒවා අපනයනය කරමු. එක් ශ්‍රිතයක් සියලුම නිෂ්පාදන ලබා ගැනීම සඳහා වනු ඇත:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

ඊට පසුව දෙවැන්න - id එකක් මගින් එක් නිෂ්පාදනයක් ලබා ගැනීම සඳහා:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

ඇත්තෙන්ම ඔබට සාධාරණ ප්‍රශ්නයක් පැනනගිය හැකිය - මෙවැනි සංකීර්ණතාවයක් අපට ලැබුණේ කෙසේද: state.products.products? පිළිතුර සරලයි, පෙර පාඩමේදී අපි ස්ලයිස් ව්‍යුහය වෙනස් කළ නිසා දැන් අපගේ නිෂ්පාදන ස්ලයිසයේ වෙනම ගුණයක් වන products තුළ අරාවක් ලෙස පවතිනු ඇත නිෂ්පාදන ස්ලයිස් state.products (මතක තබා ගන්න, මෙහි state යනු Redux තත්ත්වයේ මූල වස්තුවයි, එහි සියලුම ස්ලයිස් අඩංගු වේ).

මේ ආකාරයෙන් අපි ශ්‍රිත-තෝරාගැනීම් සඳහා කේතය යෙදුමේ එක් ස්ථානයකට මාරු කළ අතර දැන් අපට අදාළ වෙනස්කම් සිදු කිරීමට අවශ්‍ය වන්නේ එහි, අප ඒවා භාවිතා කළ ස්ථානවල ය. අපි ProductsList.jsx ගොනුවෙන් ආරම්භ කරමු. අපි එයට selectAllProducts ආයාත කරමු, මන්ද අපට මෙහිදී සියලුම නිෂ්පාදන ලබා ගැනීමට අවශ්‍ය වනු ඇත:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

සහ ProductsList ශ්‍රිතයේ කේතය ආරම්භයේදී, අපි ප්‍රතිස්ථාපනය කරමු:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

මෙම පේළිය සමඟ:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

දැන් අපි ProductPage.jsx ගොනුවට යමු. මෙහි අපට id එකකින් නිෂ්පාදනයක් අවශ්‍ය විය. අපි පේළිය ප්‍රතිස්ථාපනය කරමු (ආයාතය ගැන නොමතක වන්න):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

මෙය සමඟ:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

EditProductForm.jsx ගොනුවේදී ඔබම සමාන ප්‍රතිස්ථාපනයක් කරන්න. මෙහිදී අපට id එකකින් නිෂ්පාදනයක් ද අවශ්‍ය වේ.

මතක තබා ගන්න, එවැනි ප්‍රශස්ත කිරීමක් ඔබගේ පහසුව සඳහා පමණක් වන අතර ඔබට එය කළ හැක්කේ අවශ්‍ය හා පහසු යැයි ඔබ සලකන විට පමණි. අපගේ උදාහරණයෙන් සිතන්න, අපි විවිධ ස්ථානවල ශ්‍රිත-තෝරාගැනීමේ කේතය සෑම විටම ලියා ඇති අතර, පසුව අපි තත්ත්ව ව්‍යුහය වෙනස් කළහොත්, එවිට එය සියලු සංරචකවල නිවැරදි කිරීමට සිදුවනු ඇත.