POST сұранысын өңдеу, Redux-та thunk көмегімен жіберілген

Біз сіздермен өнімдер мен сатушылардың деректерін серверден алдық және оларды қолданбада көрсеттік. Бірақ 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 объектісін жасаңыз және оны сервер жауабында жіберіңіз.