Redux යෙදුමට reducer එකතු කිරීම

පෙර පාඩමේදී, අපි සෑම නිෂ්පාදනයකටම පරිශීලක ප්‍රතික්‍රියා තිබීම සඳහා UserReaction සංරචකය නිර්මාණය කළෙමු. දැන් අපට පරිශීලකයා එක් එක් ප්‍රතික්‍රියා බොත්තම මත ක්ලික් කරන විට ප්‍රතික්‍රියා ගණන් කාරකය සකසන reducer එකක් ලිවිය යුතුය.

අපි අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු, එහි සියලුම reducers අඩංගු productsSlice.js ගොනුව විවෘත කරමු. දැන් reducers ගුණාංගය තුළ තවත් reducer එකක් වන reactionClicked නිර්මාණය කරමු (අපට එය productAdded ට පෙර, පළමු ස්ථානයේ තැබිය හැකිය - නමුත් එය වැදගත් නොවේ). සුපුරුදු පරිදි, එයට පරාමිති ලෙස state සහ action සම්ප්‍රේෂණය කරමු:

reactionClicked(state, action) {},

දැන් අපි පෙර පියවරේදී හිස්ව තැබූ සුළු වරහන් තුළ, ඒ සඳහා කේතය ලියමු. පළමුවෙන්ම, අපි action වස්තුවේ payload වලින් නිෂ්පාදනයේ id සහ ප්‍රතික්‍රියාවේ නම උකහා ගනිමු:

const { productId, reaction } = action.payload

ඉන්පසු සම්ප්‍රේෂණය කළ state වලින් අවශ්‍ය නිෂ්පාදනය ලබා ගනිමු:

const currentProduct = state.find(product => product.id === productId)

එවැනි නිෂ්පාදනයක් තිබේ නම්, සම්ප්‍රේෂණය කළ ප්‍රතික්‍රියාවේ අගය 1 කින් වැඩි කරමු:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

ඒ තරම්ය, අපගේ reactionClicked සඳහා වන කේතය සූදානම්:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

දැන් ගොනුවේ අවසානයේ, ලබාගත් action creator අපනයනය කරමු:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

මෙහිදී වැදගත් කරුණු දෙකක් සලකන්න. පෙර පාඩම් වලින් ඔබට මතකව ඇති පරිදි - reducer කේතය තුළ සෘජුව අගය යාවත්කාලීන කිරීමට නොහැකිය (මෙම පේළිය දෙස බලන්න: reactions[reaction]++), නමුත් අපට මෙය කරගත හැකිය, මන්ද අපි එය Immer පුස්තකාලය භාවිතා කරන createSlice තුළදී කරන බැවිනි. එය අපගේ කේතය "ආරක්ෂිත" යාවත්කාලීනයක් බවට පරිවර්තනය කිරීම සඳහා සැලකිල්ලෙන් කටයුතු කරයි. මෙයඅපට සංකීර්ණ දේවල් සරල ආකාරයෙන් ලිවීමට ඉඩ සලසයි.

මතක තබාගත යුතු ඊළඟ කාරණය නම් action වස්තුවේ අවම වශයෙන් හැකි තොරතුරු ප්‍රමාණය අඩංගු විය යුතුය - කුමක් සිදු වුණේදැයි දක්වා ඇති තොරතුරු පමණි. එහි කිසිදු ගණනය කිරීම් කිරීම සුදුසු නොවේ. state යාවත්කාලීන කිරීම සඳහා සියලු ගණනය කිරීම් reducer තුළ කළ යුතුය, මෙහිදී එය සඳහා අවශ්‍ය තරම් තර්කනය ලිවිය හැකිය.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කර studentsSlice.js ගොනුවේ reducers ක්ෂේත්‍රයට පාඩමේ දක්වා ඇති පරිදි තවත් reducer එකක් වන voteClicked එකතු කරන්න. ඒ සඳහා කේතය ලියන්න. ඔබගේ reducer හි කාර්යය වන්නේ - ක්ලික් කළ විට, එම ශිෂ්‍යයා සඳහා ක්ලික් කළ vote (හෝ ඡන්ද) හි අගය 1 කින් වැඩි කිරීමයි.

ගොනුවේ අවසානයේ, ලබාගත් action creator voteClicked අපනයනය කිරීමට අමතක නොකරන්න.