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

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

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

export const addProduct = createAsyncThunk()

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

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

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

export 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のおかげであることを覚えておいてください）：

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

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

学生管理アプリケーションを開いてください。その中のファイルstudentsSlice.jsを開きます。 createAsyncThunkを使用して、レッスンで示したように新しい学生を追加するためにサーバーにPOSTリクエストを送信する別のthunk addStudentを作成してください。

次に、下の方でstudentsSliceに変更を加えます： reducersプロパティ内のレデューサーstudentAddedを完全に削除します。そして、extraReducersフィールドに、レッスンで示したように、リクエストが成功した場合にアクションのpayloadから studentsスライスに新しい学生を追加する追加レデューサーを加えます。