Redux හි action වස්තුව සඳහා දත්ත සකස් කිරීම

මෑතකදී අපි ඔබ සමඟ කතා කළේ createSlice ශ්‍රිතය එක් ආර්ගියුමෙන්ට් එකක් අපේක්ෂා කරන බවයි action.payload නිර්මාණය කිරීමේදී. එක් අතකින් එය එහි භාවිතය සරල කරයි, අනෙක් අතින් action වස්තුවේ අන්තර්ගතය සකස් කිරීම සඳහා අතිරේක ක්‍රියාමාර්ග අවශ්‍ය විය හැකිය.

අපි අපේ නිෂ්පාදන යෙදුම විවෘත කරමු, සහ එහි NewProductForm.jsx ගොනුව. පහත කේත පේලිය කෙරෙහි අවධානය යොමු කරන්න:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

මෙහිදී අපි payload වස්තුව කෙලින්ම React component එකේ එකතු කර එය action එකට productAdded යොමු කරමු. අපට එවැනිම action එකක් යැවිය යුතු නම් කෙසේද ක්ෂණික සංරචක කිහිපයකින් හෝ තර්කනය සංකීර්ණ වුවහොත්? සාමාන්‍යයෙන් අපේ සංරචකයට පැහැදිලි විය යුත්තේ නැත payload හි වස්තුව දිස්වන්නේ කෙසේද මෙම action සඳහා. ඊට අමතරව අපි කැමති නැත නිරන්තරයෙන් කේතය පිටපත් කිරීම.

මෙම ගැටළු නැවත විසඳීමට අපට උදව් විය හැකිය අපගේ ප්‍රසිද්ධ createSlice, මන්ද reducer එක ලියන විට එය අපට callback ශ්‍රිතය භාවිතා කිරීමට ඉඩ දෙයි prepare, එහිදී විවිධ ලිවිය හැකිය තර්කනය, අහඹු සංඛ්‍යා ජනනය කිරීම සහ තවත් බොහෝ දේ. තුළ එවැනි අවස්ථාවක, reducer ක්ෂේත්‍රය සඳහා වන අගය විය හැකිය පහත වස්තුව ලෙස නිරූපණය කර ඇත:

{reducer, prepare}

අපි අපේ ගොනුව විවෘත කරමු productsSlice.js සහ reducer සඳහා කේතය වෙනස් කරන්න productAdded. දැන් මෙම කේත කොටස:

productAdded(state, action) {
	state.push(action.payload)
},

අපි එය පහත සඳහන් එකට වෙනස් කරමු, එහිදී ශ්‍රිතය reducer සිදු කරයි store හි state යාවත්කාලීන කිරීම, සහ prepare - වස්තුව නැවත ලබා දෙන්න payload සමඟ ජනනය කරන ලද id සහ අපගේ අනෙකුත් දත්ත:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

දැන් අපි id ජනනය කරන බැවින් මෙහි, සංරචකයේ නොවේ, අපි කරමු ආයාතයට nanoid එකක් එක් කරන්න:

import { createSlice, nanoid } from '@reduxjs/toolkit'

අවසාන වෙනස්කම් සිදු කරමු NewProductForm.jsx. වෙනුවට පේලිය:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

අපට ඇත්තේ එකකි, එහිදී අපි හුදෙක් අවශ්‍ය දත්ත අපි කොමාවෙන් යොමු කරමු (මෙම ගොනුවේ ඉවත් කිරීමට අමතක නොකරන්න ආයාතයෙන් nanoid):

dispatch(productAdded(name, desc, price, amount))

අපි යෙදුම ආරම්භ කර, පසුව නව එකක් සාදන්න නිෂ්පාදනය සහ අපි කිසිවක් නොවන බවට වග බලා ගන්න බිඳ දැම්මා.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. StudentsSlice.js ගොනුවේ යළි ලියන්න ඔබේ reducer studentAdded එම ආකාරයෙන්, එය වස්තුවක ආකාරයෙන් විය යුතුය {reducer, prepare}, පාඩමේ පෙන්වා ඇති පරිදි.

අදාළ වෙනස්කම් සිදු කරන්න ගොනුව NewStudentForm.jsx, පෙන්වා ඇති පරිදි පාඩමේදී. යෙදුම ආරම්භ කර වග බලා ගන්න සියල්ල කලින් මෙන් ක්‍රියාත්මක වේ.