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

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

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

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

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

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

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

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

මේ ආකාරයෙන් අපි ශ්‍රිත-තෝරාගැනීම් සඳහා කේතය යෙදුමේ එක් ස්ථානයකට මාරු කළ අතර දැන් අපට අදාළ වෙනස්කම් සිදු කිරීමට අවශ්‍ය වන්නේ එහි, අප ඒවා භාවිතා කළ ස්ථානවල ය. අපි 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 එකකින් නිෂ්පාදනයක් ද අවශ්‍ය වේ.

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

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. එහි studentsSlice.js ගොනුව විවෘත කරන්න. ගොනුවේ අවසානයේ ලියන්න සහ පාඩමේ පෙන්වා ඇති පරිදි, අපනයනය කරන්න, ශිෂ්‍යයන් සියල්ල ලබා ගැනීම සඳහා තෝරාගැනීම් දෙකක් selectAllStudents සහ id එකකින් එක් ශිෂ්‍යයක් ලබා ගැනීම සඳහා selectStudentById.

දැන් selectAllStudents සහ selectStudentById ගොනුවලට ආයාත කරන්න StudentsList.jsx, StudentPage.jsx සහ EditStudentForm.jsx, පාඩමේ පෙන්වා ඇති පරිදි මෙම ගොනු වල අදාළ වෙනස්කම් සිදු කරන්න.