Redux store තුළ නිෂ්පාදන දත්ත වෙනස් කිරීම

අපි නිෂ්පාදන එකතු කිරීමට ඉගෙන ගත්තෙමු, නමුත් නිෂ්පාදනයක් පිළිබඳ තොරතුරු වෙනස් කිරීමට අවශ්‍ය නම් කුමක් කළ යුතුද? මෙම සහ ඊළඟ පාඩම්වලදී එය කෙසේ කළ යුතුදැයි අපි සලකා බලමු.

අපගේ නිෂ්පාදන යෙදුම විවෘත කර productsSlice.js ගොනුව වෙත යමු. අපි ආරම්භ කරන්නේ products slice සඳහා තවත් reducer එකක් ලිවීමට අවශ්‍ය වීමෙනි, නිෂ්පාදනයක් යාවත්කාලීන කිරීමේදී එය ක්‍රියාත්මක වේ. අපි එය productUpdated ලෙස නම් කර reducer productAdded ට පසුව reducers ක්ෂේත්‍රයට එකතු කරමු. එසේම අපි එයට වහාම පරාමිතීන් ලෙස state සහ action යොමු කරමු, ඒවා මත පදනම්ව, අපට මතක ඇති පරිදි, reducer ක්‍රියා කරයි:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

දැන් අපි සිතමු, නිෂ්පාදනයක් යාවත්කාලීන කිරීම සඳහා අපට මොනවාද අවශ්‍ය දත්ත. පළමුව සියල්ල - එය id ය, එය මගින් අපට සොයා ගත හැකිය store තුළ අපට උනන්දුවක් දක්වන නිෂ්පාදනය. ඉතිරි දත්ත - නම, විස්තර, මිල සහ ප්‍රමාණය වෙනස් කිරීම සඳහා අප සතුව පවතී. මෙම අගයන් සියල්ලම අපි action වස්තුවේ payload ගුණාංගයෙන් ලබා ගනිමු, එය අප වෙත පැමිණෙනු ඇත, සහ, අපි ලියන්නේ නම් එය අතින්, එය පහත දැක්වෙන පරිදි පෙනෙනු ඇත. සටහන් කරන්න, අපේක්ෂිත අගය payload ගුණාංගය - එක් තර්කයක්, එබැවින් අපි වනු ඇත වස්තුවක් මෙහි යොමු කරන්න (මෙය ගැන අපි කතා කරමු අනාගතයේදී):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

ප්‍රධාන කරුණු සොයා ගැනීමෙන් පසු, දැන් අපට හැකිය සර්පිලාකාර වරහන් තුළ කේතය ලියන්න productUpdated. පළමුව ලබා ගනිමු වස්තුව action වෙනස් කළ දත්ත:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

දැන් අපි ලැබුණු id අනුව නිෂ්පාදනය සොයා ගනිමු, යාවත්කාලීන කළ යුතු එක:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

එවැනි නිෂ්පාදනයක් store තුළ හමු වුවහොත් අපි එහි දත්ත අලුත් අගයන් සමඟ ප්‍රතිස්ථාපනය කරමු:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

අපට ඉතිරිව ඇත්තේ action creator එක නිර්යාත කිරීම පමණි භාවිතා කිරීම සඳහා සංරචකය තුළ, එය කරුණාවෙන් අපට createSlice නිර්මාණය කරයි. අපි එය ගොනුවේ අවසානයේ නිර්යාතයට එක් කරමු, පවතින productAdded සමඟ:

export const { productAdded, productUpdated } = productsSlice.actions

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. පාඩමේ අන්තර්ගතය අධ්‍යයනය කිරීමෙන් පසු, studentsSlice.js ගොනුවේ productsSlice සඳහා තවත් reducer එකක් ලියන්න, store තුළ ශිෂ්‍යයාගේ දත්ත යාවත්කාලීන කරන එක පරිශීලකයා විසින් ඒවා වෙනස් කළහොත්. එය studentUpdated ලෙස නම් කරන්න.

මෙම අවස්ථාවේදී ඔබගේ action වස්තුව කෙසේ පෙනෙනු ඇතිද? එහි කේතය පිළිතුරෙන් යවන්න.

ගොනුවේ අවසානයේ ලබාගත් action creator studentUpdated නිර්යාත කරන්න.