Lấy dữ liệu người bán trong Redux

Hãy khởi chạy ứng dụng sản phẩm của chúng ta. Chúng ta thấy rằng trong các thẻ sản phẩm, người bán không được hiển thị. Hãy lấy dữ liệu từ máy chủ và hiển thị thông tin này. Để làm điều này, chúng ta sẽ phải thực hiện một chuỗi hành động đã quen thuộc.

Đầu tiên, hãy mở tệp server.js. Tìm mảng handlers và thêm một xử lý GET request nữa vào đó (sau xử lý GET cho sản phẩm). Như bạn thấy, nó gần như giống hệt nhau:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Chúng ta đã xử lý yêu cầu trên máy chủ. Bước tiếp theo, trong tệp sellersSlice.js, chúng ta cần viết thunk để lấy dữ liệu từ máy chủ. Để làm điều này, hãy nhập client và createAsyncThunk vào đó:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Bây giờ chúng ta sẽ lấy dữ liệu người bán từ máy chủ, vì vậy hãy xóa chúng khỏi initialState, chỉ để lại một cặp ngoặc trống:

const initialState = []

Và sau đó, trước hàm sellersSlice, hãy tạo thunk fetchSellers của chúng ta. Chúng ta sẽ truyền đường dẫn mà chúng ta đã chỉ định trên máy chủ cho client:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

Chúng ta chỉ còn phải tạo một reducer bổ sung cho sellersSlice. Ở đây chúng ta sẽ chỉ giới hạn ở việc xử lý yêu cầu thành công. Tất cả các action được tạo bởi fetchSellers sẽ giống hệt với các action của fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Nhắc lại rằng lần trước khi lấy sản phẩm, chúng ta đã thay đổi giá trị hiện tại của state. Ở đây chúng ta sử dụng một cách hơi khác và chỉ đơn giản trả về một giá trị mới, trong createSlice cũng có thể làm như vậy. Bằng cách đó, chúng ta đạt được hai mục tiêu. Thứ nhất, chúng ta có được dữ liệu, và thứ hai, bây giờ chúng ta có đảm bảo rằng trong danh sách người bán sẽ không có thêm bất cứ thứ gì khác, bởi vì chúng ta đã hoàn toàn ghi đè slice bằng giá trị action.payload.

Hãy mở ứng dụng về sinh viên của bạn. Mở tệp server.js trong đó, thêm một trình xử lý nữa cho GET request của giáo viên vào mảng handlers.

Và bây giờ hãy mở tệp teachersSlice.js. Làm cho initialState trở thành một mảng trống, như đã được hiển thị trong bài học. Trước hàm studentsSlice, hãy viết thunk fetchTeachers.

Trong hàm createSlice, hãy viết bổ sung extra reducer, chỉ giới hạn ở việc xử lý yêu cầu thành công.