Reduxでの販売者データの取得

商品のアプリケーションを起動しましょう。商品カードに販売者が表示されていないことがわかります。サーバーから販売者データを取得して表示しましょう。そのためには、既におなじみの手順を実行する必要があります。

まず、ファイル server.js を開きます。配列 handlers を見つけ、商品のGET処理の後に、さらに別のGETリクエスト処理を追加します。ほとんど同じであることがわかるでしょう：

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

サーバー上のリクエストは処理しました。次の段階では、ファイル sellersSlice.js でサーバーからのデータ取得のための thunk を作成する必要があります。そのために、 client と createAsyncThunk をインポートします：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

これでサーバーから販売者を取得するので、 initialState からは削除し、単に空のブラケットだけを残します：

const initialState = []

そして、関数 sellersSlice の前に、thunk fetchSellers を作成します。クライアントにはサーバーで指定したパスを渡します：

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

あとは、 sellersSlice に追加のレデューサーを作成するだけです。ここでは成功したリクエストの処理に限定します。 fetchSellers によって生成されるすべてのアクションは、 fetchProducts のアクションと同一になります：

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

前回商品を取得したときには、現在のステートの値を変更したことを思い出してください。今回は少し異なる方法をとり、単に新しい値を返しました。 createSlice でも同様に行うことができます。これにより、二つの目的を達成しました。第一にデータを取得し、第二に、スライスを action.payload の値で完全に上書きしたため、販売者リストに他に何かが追加される恐れはありません。

受講生データのアプリケーションを開いてください。ファイル server.js を開き、配列 handlers に講師のGETリクエスト用の別のハンドラーを追加してください。

次に、ファイル teachersSlice.js を開きます。レッスンで示したように、 initialState を空の配列にします。関数 studentsSlice の前に、thunk fetchTeachers を記述してください。

関数 createSlice で追加のレデューサーを記述し、成功したリクエストの処理に限定してください。