Redux හි state ව්යුහය වෙනස් කිරීම
අපගේ Redux යෙදුම බාහිර සේවාදායකයක් සමඟ අන්තර්ක්රියා කිරීම සඳහා ක්රියාත්මක කරන පළමු අදියර වන්නේ යෙදුම අවධාරණය කිරීමේදී එහි ගබඩා කර ඇති දත්ත ලබා ගැනීමයි. එහෙත් පළමුව අපි අපගේ යෙදුමට සමහර වෙනස්කම් සිදු කරමු.
අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු, එහි ඇති
productsSlice.js ගොනුව විවෘත කරමු. initialState හි නිර්වචනයට අවධානය යොමු කරන්න. මුලදී අපගේ නිෂ්පාදන
slice වන productsSlice යනු නිෂ්පාදන දත්ත සහිත වස්තූන් (අපගේ නඩුවේ ඒවා දෙකක්) අඩංගු අරාවකි. පළමුවෙන්ම, අපි දැන් ඒවා
සේවාදායකයෙන් පූරණය කරන නිසා, අපි ඒවා initialState වෙතින් ඉවත් කළ යුතුය. දෙවනුව, අපි සේවාදායකයට API ඉල්ලීම් යවන අතර ඒවායේ
තත්වය දැන ගැනීම වැදගත් වේ. මෙම කරුණු දෙක සැලකිල්ලට ගනිමින්, අපි
initialState නැවත සකස් කරමු. දැන් එය විය යුත්තේ
products (මුලදී මෙහි දත්ත නොමැති හිස් අරාවක් වනු ඇත), status සහ error යන ක්ෂේත්ර සහිත සරල වස්තුවකි.
දැන් අපගේ initialState සඳහා කේතය
සැලකිය යුතු ලෙස කෙටි වනු ඇත:
const initialState = {
products: [],
status: 'idle',
error: null,
}
දැනට අපි තත්වය 'idle' (සක්රිය නොවන) ලෙස සකස් කර ඇත,
මුලදී අපි කිසිදු ඉල්ලීමක් නොයවන නිසා, සාමාන්යයෙන් එය
වෙනස් වන අතර 'loading', 'succeeded',
'failed' යන අගයන් ගත හැකිය. තත්වය දැක්වීම සඳහා
ඔබට පහසු නම් ඔබ තෝරා ගත හැකි බව මතක තබා ගන්න.
කේතය පහළට යමු. initialState වෙනස් කිරීමෙන් පසුව,
අපි reducer ශ්රිතවල මෙම state සමඟ ක්රියා කරන කේතය ද වෙනස් කළ යුතුය.
productAdded සඳහා කේතය දෙස බලමු:
state.push(action.payload)
දැන් අපි නව නිෂ්පාදන ගබඩා කරන්නේ
නිෂ්පාදන සඳහා state වෙත පමණක් නොව, එහි
state.products ගුණය වෙතයි. එමනිසා,
ඉහත සඳහන් කරුණ පහත පරිදි වෙනස් කරමු:
state.products.push(action.payload)
ඒ අනුව, අපි එම වෙනස්කම්
reactionClicked reducer සඳහා ද කරමු. ඒ වෙනුවට:
const currentProduct = state.find((product) => product.id === productId)
දැන් එය වනු ඇත:
const currentProduct = state.products.find((product) => product.id === productId)
productUpdated reducer හි කේතයේ
state වෙනුවට state.products භාවිතා කිරීම ඔබම කරන්න.
ඔබගේ ශිෂ්ය යෙදුම විවෘත කරන්න.
එහි ඇති studentsSlice.js ගොනුව විවෘත කරන්න.
දැන් ඔබගේ initialState විය යුත්තේ
ගුණ තුනක් සහිතව: students, status,
error - පාඩමේ පෙන්වා ඇති පරිදි එය නැවත සකස් කරන්න.
අදාළ වෙනස්කම් කරන්න
කේතය පහළට ද. ඔබගේ
reducer ශ්රිත තුනේ කේතයේ
state වෙනුවට state.students භාවිතා කරන්න.
