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

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

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

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

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

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {})

さて、中括弧の中にコールバックのコードを書きましょう。 まず、リクエストデータを抽出し、エラーの場合には データを保存できなかったという応答とステータス500をサーバーから送信します：

api/server.jshttp.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に書き込みます（販売者のデータもサーバー上に保存されていますからね ;) ）：

api/server.jsconst seller = db.seller.findFirst({
  where: { id: { equals: data.seller } },
})
data.seller = seller

次に、データベース内にこの製品用のリアクションオブジェクトを作成します。 これで製品に必要な全てのフィールドが揃ったので、 データベース内に製品そのものも作成しましょう：

api/server.jsdata.reactions = db.reaction.create()
const product = db.product.create(data)

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

api/server.jsawait delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

これでサーバー側の作業は完全に完了し、 もう戻ることはありません。

ちなみに、もう一つ便利なことです。 行export const worker = setupWorker(...handlers)の後に、 以下のコードを追加できます：

api/server.jsworker.listHandlers().forEach((handler) => {
  console.log(handler.info.header)
})

これで、ブラウザのコンソールで各ハンドラーの 実行結果を見ることができるようになります。

もちろん、私たちのサーバーは本物ではないので、 ブラウザでページを強制的に更新すると、 作成した新しい製品オブジェクトはすべて消えてしまいます。