GETリクエストによるサーバーからのデータ送信 in Redux

では、データベースが用意できました。Reduxアプリケーションを起動する際に最初に行うことは、サーバーから商品データを取得することです。そのためには、アプリケーションからGETリクエストを送信する必要があります。サーバー側でこのリクエストを処理してみましょう。

商品アプリケーションを開き、その中にあるファイル server.js を開きます。HTTPリクエストを扱うためには、mswからいくつかのツールをファイルにインポートする必要があります。さっそくやってみましょう：

import { http, HttpResponse, delay } from 'msw'

また、現実を反映させてネットワークの遅延の可能性にも対応しましょう。データの読み込みが表示されるように、人工的な遅延の値を 2 秒に設定します。const PRODS_PER_SELLER = 2 の後に記述します：

const ARTIFICIAL_DELAY_MS = 2000

次に、ファイルの最後、ワーカーのエクスポートの前に、APIリクエストハンドラーのための配列を定義します：

export const handlers = []

そして、角括弧内に商品へのGETリクエストをインターセプトする最初のハンドラーを記述します：

export const handlers = [http.get()]

http.get の最初のパラメーターとして、例えば '/fakeServer/products' のようなフェイクアドレスを渡し、2番目のパラメーターとして非同期のコールバック関数を渡します：

export const handlers = [http.get('/fakeServer/products', async () => {})]

次に、このコールバックのコードを記述します。これを使用して、データベースからすべての商品を抽出します。ここでは、前回の授業で作成した関数 serializeProduct も使用します。これを map に渡しましょう。その後、（ネットワークが遅いかのように）遅延を発生させ、response に商品データオブジェクトをJSON形式で返します：

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

最後に。ワーカーの最初のハンドラーを作成したので、このワーカーに handlers 配列を渡しましょう。そのために、ファイルの最後のコード行を次のように修正します：

export const worker = setupWorker(...handlers)

受講生用のアプリケーションを開き、その中のファイル server.js を開いてください。mswから指定されたツールをファイルにインポートします。このレッスンの内容を学び、リクエストインターセプトのための空のハンドラー配列を作成してください。その中に、受講生のGETリクエストを処理するハンドラーのコードを記述してください。パスは '/fakeServer/students' としてください。

ファイルの最後で、ハンドラー配列 handlers をワーカーに渡すことを忘れないでください。