Penghantaran Data Menggunakan Thunk dalam Redux

Dalam pelajaran lepas, kita telah membincangkan pemprosesan permintaan POST pada pelayan palsu kita. Mari sekarang tulis fungsi thunk yang akan menghantar permintaan ke pelayan.

Buka aplikasi produk kita, dan dalamnya fail productsSlice.js. Sekarang selepas thunk fetchProducts kita akan menggunakan createAsyncThunk untuk mencipta thunk addProduct:

export const addProduct = createAsyncThunk()

Parameter pertama kita akan hantar ke createAsyncThunk ialah 'products/addProduct', dan parameter kedua ialah callback asingkron yang akan menerima objek dengan data produk baru:

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

Dalam kod callback ini, kita akan panggil klien, menghantar laluan dan objek dengan 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 pada medan reducers untuk productsSlice di bawah dalam kod. Sebelum ini kita menambah produk baru menggunakan reducer productAdded, yang mempunyai kaedah reducer dan prepare. Sekarang kita menjana data yang diperlukan pada pelayan dan bekerja dengan thunk, jadi kita akan buang sepenuhnya reducer productAdded dari kod ini. Kemudian tambahkan ke dalam kaedah extraReducers (pada akhir kodnya) satu lagi reducer tambahan, yang dalam kes permintaan berjaya akan menambah ke dalam slice products produk baru terus dari payload action (ingat, kod sedemikian mungkin hanya terima kasih kepada createSlice yang unik):

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

Ya, sebagai ingatan, jangan lupa buang nanoid dari barisan import, dan productAdded dari eksport actions di akhir fail.

Buka aplikasi pelajar anda. Buka fail studentsSlice.js di dalamnya. Dengan menggunakan createAsyncThunk, cipta satu lagi thunk addStudent, yang akan menghantar permintaan POST ke pelayan untuk menambah pelajar baru seperti yang ditunjukkan dalam pelajaran.

Seterusnya, di bawah buat perubahan untuk studentsSlice: buang sepenuhnya reducer studentAdded dalam sifat reducers. Dan dalam medan extraReducers tambah satu lagi reducer tambahan, yang akan menambah pelajar baru ke dalam slice students dari payload action dalam kes permintaan berjaya, seperti yang ditunjukkan dalam pelajaran.