ReduxにおけるThunkを使用したデータ送信

前回のレッスンでは、偽のサーバーでのPOSTリクエストの処理について学びました。 では、サーバーにリクエストを送信するthunk関数を書いてみましょう。

製品管理アプリケーションを開き、その中のファイルproductsSlice.jsを開きます。 次に、thunk fetchProductsの後で、 createAsyncThunkを使用してthunk addProductを作成します：

products/productsSlice.jsexport const addProduct = createAsyncThunk()

createAsyncThunkの最初のパラメータとして 'products/addProduct'を渡し、2番目のパラメータとして 新しい製品のデータオブジェクトを受け取る非同期コールバックを渡します：

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

このコールバックのコード内で、クライアントを呼び出し、 パスと製品オブジェクトをパラメータとして渡し、 応答データを返します：

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {
    const response = await client.post('/fakeServer/products', newProduct)
    return response.data
  }
)

次に、コードの下の方で、productsSliceの reducersフィールドを見てみましょう。 以前は、reducerメソッドとprepareメソッドを持つ productAddedレデューサーを使用して新しい製品を追加していました。 現在はサーバーで必要なデータを生成し、thunkを扱っているため、 ここから完全にレデューサーproductAddedをコードから削除します。 その後、extraReducersメソッド（そのコードの末尾）に、 もう1つの追加レデューサーを加えます。このレデューサーは、 リクエストが成功した場合、アクションのpayloadから 直接productsスライスに新しい製品を追加します （このようなコードが可能なのは、唯一無二の createSliceのおかげであることを覚えておいてください）：

products/productsSlice.js.addCase(addProduct.fulfilled, (state, action) => {
  state.products.push(action.payload)
})

そうそう、忘れずにインポート行からnanoidを削除し、 ファイル末尾のエクスポートアクションからproductAddedを削除してください。