Gửi dữ liệu bằng thunk trong Redux

Ở bài học trước, chúng ta đã tìm hiểu về cách xử lý yêu cầu POST trên máy chủ giả của mình. Bây giờ hãy viết hàm thunk sẽ gửi yêu cầu đến máy chủ.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là tệp productsSlice.js. Bây giờ sau thunk fetchProducts chúng ta sẽ sử dụng createAsyncThunk để tạo thunk addProduct:

export const addProduct = createAsyncThunk()

Tham số đầu tiên chúng ta truyền vào createAsyncThunk là 'products/addProduct', và tham số thứ hai là một callback bất đồng bộ, callback này sẽ nhận một đối tượng chứa dữ liệu sản phẩm mới:

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

Trong mã của callback này, chúng ta sẽ gọi client, truyền cho nó các tham số là đường dẫn và đối tượng chứa sản phẩm, sau đó trả về dữ liệu phản hồi:

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

Bây giờ hãy nhìn xuống dưới trong mã vào trường reducers của productsSlice. Trước đây chúng ta đã thêm sản phẩm mới bằng reducer productAdded, trong đó chúng ta có các phương thức reducer và prepare. Bây giờ chúng ta tạo ra dữ liệu cần thiết trên máy chủ và làm việc với thunk, vì vậy chúng ta sẽ loại bỏ hoàn toàn reducer productAdded khỏi mã ở đây. Sau đó thêm vào phương thức extraReducers (vào cuối mã của nó) một reducer bổ sung nữa, reducer này trong trường hợp yêu cầu thành công sẽ thêm vào slice products sản phẩm mới trực tiếp từ payload của action (hãy nhớ rằng mã như vậy chỉ khả thi nhờ vào createSlice độc đáo):

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

Vâng, nhân tiện, đừng quên bỏ nanoid khỏi các dòng import, và productAdded khỏi export các action ở cuối tệp.

Hãy mở ứng dụng quản lý sinh viên của bạn. Mở trong đó tệp studentsSlice.js. Sử dụng createAsyncThunk để tạo một thunk nữa addStudent, thunk này sẽ gửi yêu cầu POST đến máy chủ để thêm mới một sinh viên, như đã được trình bày trong bài học.

Tiếp theo bên dưới, hãy thực hiện các thay đổi cho studentsSlice: loại bỏ hoàn toàn reducer studentAdded trong thuộc tính reducers. Và trong trường extraReducers, hãy thêm một reducer bổ sung, reducer này sẽ thêm sinh viên mới vào slice students từ payload của action trong trường hợp yêu cầu thành công, như đã trình bày trong bài học.