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

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

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

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

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

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

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

sellers/sellersSlice.jsconst initialState = []

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

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

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

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

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