ReduxのThunkを用いて送信されるPOSTリクエストの処理

私たちはサーバーから製品と販売者のデータを取得し、アプリケーションに表示しました。しかし、Thunkを使用すると、データを取得するだけでなく、送信することもできます。その方法について学びましょう。

新しい製品を追加した後、それはstore、つまり私たちのアプリケーション内に残ります。新しい製品がサーバー上にも保存されるようにしましょう。

まずはサーバー側から始めましょう。ここでは、 GETリクエストではなくPOSTリクエストを処理する必要があります。なぜなら、サーバーにはこれから保存する製品のデータが送信されてくるからです。

製品管理アプリケーションを開き、その中のファイルserver.jsを開きます。その中の配列handlersを見つけ、POSTリクエスト用の新しいハンドラーを追加します。ここではリクエストボディも受け取るため、コールバックにはrequestを渡す必要があります：

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

さて、中括弧の中にコールバックのコードを書きましょう。まず、リクエストデータを抽出し、エラーの場合にはデータを保存できなかったという応答とステータス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)

遅延を設定し、コールバックの最後のコード行で製品を含む応答を返します：

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に対するコールバックのボディ内で、データを展開し、エラーの場合は適切な応答を送信してください。

もし全て正常であれば、データベース内で受け取ったidに基づいて講師を検索し、そのデータに書き込んでください。また、データベースに基づいて作成されたvotesオブジェクトもデータに書き込んでください。

収集したデータに基づいて、新しい学生を含む studentオブジェクトを作成し、サーバーの応答として送り返してください。