Redux හි thunk භාවිතයෙන් යවන ලද POST ඉල්ලීමක් සකසන්නේ කෙසේද

අපි ඔබ සමඟ සේවාදායකයෙන් නිෂ්පාදන සහ වෙළෙන්දන්ගේ දත්ත ලබාගෙන ඒවා යෙදුමට ප්‍රතිදානය කළෙමු. නමුත් thunk භාවිතයෙන් දත්ත ලබා ගැනීමට පමණක් නොව, යැවීමටද හැකිය. එය කරන්නේ කෙසේදැයි අපි සොයා බලමු.

අපි නව නිෂ්පාදනයක් එකතු කිරීමෙන් පසු, එය අපගේ store තුළ රඳවා තබා ගනී, එනම් අපගේ යෙදුම තුළ. අපි එය කරමු, නව නිෂ්පාදනය සේවාදායකයේ ගබඩා වනු ඇත.

අපි සේවාදායකයෙන් ආරම්භ කරමු. මෙහිදී අපට දැනටමත් GET නොව, POST ඉල්ලීම සකස් කිරීමට සිදුවේ, මන්ද සේවාදායකය වෙත දැන් නිෂ්පාදන දත්ත ලැබෙනු ඇත, එය අපි එහි ගබඩා කරමු.

අපගේ නිෂ්පාදන සමඟ යෙදුම විවෘත කරමු, සහ එහි අනුගොනුව server.js. එහි ඇති අරාව handlers සොයාගෙන එයට තවත් එක් POST ඉල්ලීම සකස් කරන්නෙක් එක් කරමු. මෙහිදී අපි ඉල්ලීමේ සිරුරද පිළිගත යුතුය, එමනිසා callback හි අප request යැවිය යුතුය:

http.post('/fakeServer/products', async ({ request }) => {})

දැන් හැකිලුම් වරහන් තුළ අපගේ callback හි කේතය ලියමු. පළමුව දත්ත උපුටා ගනිමු ඉල්ලීම සහ දෝෂයක් ඇති වූ විට සේවාදායකයෙන් ප්‍රතිචාරය යවන්න, අපට දත්ත සුරැකීමට නොහැකි වූ අතර තත්ත්වය 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

දත්ත සමඟ සියල්ල හොඳ නම්, අපි දත්ත ගබඩාවේ අප වෙත පැමිණි id අනුව වෙළෙන්දා සොයා ගනිමු ඉල්ලීමෙන් සහ මෙම වෙළෙන්දා ඇතුළු කරන්න data (වෙළෙන්දාගේ දත්ත ද අප සමඟ සේවාදායකයේ ගබඩා කර ඇත ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

පසුව දත්ත ගබඩාවේ මෙම සඳහා වස්තුවක් නිර්මාණය කරමු ප්‍රතික්‍රියා සහිත නිෂ්පාදනය. දැන්, නිෂ්පාදනය සඳහා අවශ්‍ය සියලුම ක්ෂේත්‍ර ඇත, දත්ත ගබඩාවේ නිර්මාණය කරන්න සහ නිෂ්පාදනයම:

data.reactions = db.reaction.create()
const product = db.product.create(data)

ප්‍රමාදයක් සකසා අවසාන වශයෙන් කේතයේ රේඛාව අපගේ callback සඳහා නිෂ්පාදනය සමඟ ප්‍රතිචාරය ආපසු ලබා දෙන්න:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

මෙයින් අපි සේවාදායකය සමඟ සම්පූර්ණයෙන් අවසන් කර ඇත තවදුරටත් එය වෙත නොඑන්නෙමු.

මාර්ගය වන විට, තවත් ප්‍රයෝජනවත් දෙයක්. රේඛාවෙන් පසුව export const worker = setupWorker(...handlers) ඔබට පහත කේතය එක් කළ හැකිය:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

දැන් ඔබට ප්‍රතිඵලය දැක ගත හැකිය සෑම සකසන්නෙකුගේම ක්‍රියාත්මක වීම බ්‍රව්සරයේ කොන්සෝලය.

ඇත්ත වශයෙන්ම අපගේ සේවාදායකය සැබෑ නොවන අතර අපි බ්‍රව්සරයේ පිටුව බලහත්කාරයෙන් නැවුම් කරන්නේ නම්, අපගේ නව වස්තු සියල්ල නිෂ්පාදන සමඟ අතුරුදහන් වේ.

ඔබගේ සිසුන් සමඟ යෙදුම විවෘත කරන්න. එහි ඇති අනුගොනුව server.js විවෘත කරන්න. එක් කරන්න අරාවට handlers POST ඉල්ලීම සකස් කිරීම. මෙම ඉල්ලීමේ සිරුරේ ඔබ පිළිගනු ඇත නව එකතු කරන ලද සිසුවෙකුගේ දත්ත.

ඔබගේ http.post සඳහා callback හි සිරුරේ දත්ත ඉවත් කර දෝෂයක් ඇති වූ විට යවන්න අදාළ ප්‍රතිචාරය.

සියල්ල හොඳ නම්, දත්ත ගබඩාවේ ලැබුණු id අනුව ගුරුවරයා සොයා ගෙන ඇතුළු කරන්න ඔහු දත්ත තුළට. දත්ත තුළත් ඇතුළු කරන්න, දත්ත ගබඩාව මත පදනම්ව නිර්මාණය කරන ලද වස්තුව votes.

එකතු කරන ලද දත්ත මත වස්තුව නිර්මාණය කරන්න student නව සිසුවෙකු සමඟ සහ එය සේවාදායක ප්‍රතිචාරයෙන් යවන්න.