Redux හි Reducers

පෙර පාඩමේ දී, අපි createSlice ශ්‍රිතය භාවිතයෙන් products සඳහා slice එකක් සහ එම slice එක store තුළ ගබඩා කර ඇති යාවත්කාලීන කිරීමට වගකිව යුතු reducer එකක් සෑදුවෙමු. නැවතත් මතක් කරමි, Redux හි state දත්ත වෙනස් කරන්නේ reducers මගිනි.

මතක තබා ගත යුතුයි, reducers මත ප්‍රබන්ධ කීපයක් අනිවාර්ය වේ. Reducer එකක් state යාවත්කාලීන කරන්නේ ලැබුණු වර්තමාන state අගයන් සහ action වස්තුව මත පමණක් වන අතර, පසුව state කෙසේ වෙනස් කළ යුතුදැයි තීරණය කර එහි නව අගය නැවත ලබා දෙයි.

අපි දන්නවා, පෙරනිමියෙන් JavaScript හි වස්තු සහ arrays mutable (වෙනස් කළ හැකි) බව. එසේම අපි දන්නවා, state කෙලින්ම වෙනස් කිරීම අවසර නැති බව, එවැනි අවස්ථාවලදී පිටපත් සමඟ පමණක් වැඩ කළ යුතු බව. Reducer එකටද මෙම නීතිය අනුගත විය යුතුය. නමුත් මෙවැනි තර්ක හසුරුවීම වාචිකව ලිවීම තරමක් වෙහෙසකාරී සහ දුෂ්කර කාර්යයක් විය හැකි අතර, මෙහිදී createSlice ශ්‍රිතය උපකාරයට පැමිණේ, එය Immer ලයිබ්‍රරිය භාවිතා කරයි, ඔබේ 'mutable' කේතය 'immutable' එකක් බවට පරිවර්තනය කරයි. මේ අනුව, පව් කිරීමට සහ ජීවිතය සරල කිරීමට createSlice හෝ createReducer ශ්‍රිත භාවිතා කිරීමේදී පමණක් හැකිය.

Reducer එකක සීමාවන්ට අසමකාලීන තර්ක භාවිතා කිරීම, අහඹු අගයන් ගණනය කිරීම සහ වෙනත් "පාර්ශ්වීය බලපෑම්" ක්‍රියාත්මක කිරීම ද ඇතුළත් වේ. දැන්, reducer සමඟ හොඳින් හුරුපුරුදු වූ පසු, අපගේ නිෂ්පාදන ඇප් එකට නැවත යමු.

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

import productsReducer from '../parts/products/productsSlice'

දැන් reducer ලෙස අපට ආයාත කළ productsReducer ශ්‍රිතය සඳහන් කළ හැකිය:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

ඉහත සඳහන් පේලිය අපගේ store එකට පවසන්නේ, දැන් action එකක් ඇති වූ විට state.products slice සඳහා සියලු දත්ත productsReducer reducer මගින් යාවත්කාලීන වනු ඇති බවයි.

දැන් ඔබට ඇප් එක ආරම්භ කළ හැකිය (සැලකිල්ලට ගන්න, console එකේ අවලංගු reducer එකක් ගැන ඇඟවීම අතුරුදහන් වී ඇත!), බ්‍රවුසරයේ Redux DevTools විවෘත කර එහි ටැබ් වලින් සැරිසරන්න. උදාහරණයක් ලෙස, Inspector එකේ State ටැබ් එක ක්ලික් කිරීමෙන් අපට නිෂ්පාදන දෙක සමඟින් ඇති වස්තු දෙක දැකගත හැකිය, ඒවා ඇප් එක මුලින්ම දියත් කිරීමේදී state එකේ ආරම්භක අගය ලෙස පෙන්වන ලදී. Log monitor ටැබ් එකේ අපට දෝලනා ගෝලීය state එකට ඇති slices මොනවාදැයි දකින්න පුළුවන් - එය products slice එකයි, වස්තු දෙක ඇතුළත් කරයි. Chart ටැබ් එකටද බලන්න.

ඔබේ ශිෂ්‍ය ඇප් එක විවෘත කර store.js ගොනුවේ කේතය පාඩමේ දක්වා ඇති පරිදි වෙනස් කරන්න.

ඔබේ ඇප් එක බ්‍රවුසරයේ දියත් කර Redux DevTools දිගුවේ ටැබ් වලින් සැරිසරන්න.