Mengirim Data menggunakan Thunk di Redux

Pada pelajaran sebelumnya, kita telah mempelajari penanganan POST request di server palsu kita. Sekarang mari kita tulis fungsi thunk yang akan mengirim request ke server.

Buka aplikasi produk kita, dan di dalamnya file productsSlice.js. Sekarang setelah thunk fetchProducts, kita akan menggunakan createAsyncThunk untuk membuat thunk addProduct:

export const addProduct = createAsyncThunk()

Parameter pertama yang kita berikan ke createAsyncThunk adalah 'products/addProduct', dan parameter kedua adalah asynchronous callback, yang akan menerima objek dengan data produk baru:

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

Dalam kode callback ini, kita akan memanggil client, memberikannya path dan objek produk sebagai parameter, kemudian mengembalikan data respons:

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

Sekarang lihat ke bawah pada field reducers untuk productsSlice. Sebelumnya kita menambahkan produk baru menggunakan reducer productAdded, yang di dalamnya terdapat metode reducer dan prepare. Sekarang kita menghasilkan data yang diperlukan di server dan bekerja dengan thunk, jadi kita akan menghapus sepenuhnya reducer productAdded dari kode ini. Kemudian tambahkan ke dalam method extraReducers (di akhir kodenya) satu reducer tambahan lagi, yang dalam kasus request berhasil akan menambahkan ke slice products produk baru langsung dari payload action (ingat, kode seperti ini dimungkinkan berkat createSlice yang unik):

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

Ya, omong-omong, jangan lupa hapus nanoid dari baris import, dan productAdded dari export actions di akhir file.

Buka aplikasi siswa Anda. Buka file studentsSlice.js di dalamnya. Dengan menggunakan createAsyncThunk, buat satu thunk lagi addStudent, yang akan mengirim POST request ke server untuk menambahkan siswa baru, seperti yang ditunjukkan dalam pelajaran.

Selanjutnya, di bawah ini, lakukan perubahan untuk studentsSlice: hapus sepenuhnya reducer studentAdded di dalam properti reducers. Dan di field extraReducers tambahkan reducer tambahan, yang akan menambahkan siswa baru ke slice students dari payload action dalam kasus request berhasil, seperti yang ditunjukkan dalam pelajaran.