Giới thiệu về thunks trong Redux

Trong chương trước, chúng ta đã thiết lập hoạt động của máy chủ, cơ sở dữ liệu và máy khách để trao đổi dữ liệu. Bây giờ chúng ta cần bắc một nhịp cầu cuối cùng để giúp ứng dụng Redux được tổ chức 'đồng bộ' của chúng ta tương tác với máy khách bất đồng bộ mà chúng ta đã tạo trong bài học cuối cùng của chương trước, để gửi các yêu cầu và nhận dữ liệu cần thiết trong phản hồi.

Như chúng ta nhớ từ những bài học đầu tiên của phần trước, Redux không biết gì về việc làm việc với logic bất đồng bộ và vì điều này chúng ta sẽ sử dụng middleware thunk. Middleware này cho phép làm việc với các actions đã gửi, sử dụng các phương thức dispatch và getState của store trong mã thunk của chúng ta, và cũng giúp phương thức dispatch làm việc không chỉ với các đối tượng JS thông thường, mà còn với các thực thể như hàm và promise.

Thông thường, hàm thunk được gọi với hai đối số dispatch và getState (khi cần thiết), có thể được sử dụng trong thân hàm đó. Với nó, bạn có thể gửi các actions thông thường. Nó cũng có thể được gửi thông qua store.dispatch. Một ví dụ về hàm như vậy được hiển thị bên dưới:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Bây giờ hãy mở ứng dụng sản phẩm của chúng ta. Điều đầu tiên chúng ta phải nhận được từ máy chủ khi khởi động ứng dụng - đó là danh sách sản phẩm. Vì thunks thường được viết trong các tệp slice, chúng ta sẽ mở tệp productsSlice.js.

Tin vui là chúng ta không cần phải lo lắng về việc cài đặt Redux Thunk, vì hàm configureStore từ RTK đã làm điều đó cho chúng ta. Vì vậy, chỉ cần thêm createAsyncThunk vào import trong tệp:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Cũng thêm client của chúng ta vào import:

import { client } from '../../api/client'

Và bây giờ với sự trợ giúp của createAsyncThunk, hãy tạo thunk đầu tiên của chúng ta để lấy sản phẩm, làm điều này ngay sau khi khai báo đối tượng initialState:

export const fetchProducts = createAsyncThunk()

Tham số đầu tiên của createAsyncThunk sẽ nhận một chuỗi cho loại action được tạo, và tham số thứ hai - một hàm callback cho payload, hàm này sẽ trả về hoặc dữ liệu, hoặc một promise với lỗi (xem tệp client.js). Trong mã hàm, chúng ta gọi client.get và truyền cho nó đường dẫn mà chúng ta đã chỉ định trên máy chủ (xem các tham số được chấp nhận http.get trong server.js):

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

Mở ứng dụng sinh viên của bạn. Mở tệp studentsSlice.js trong đó. Import hàm createAsyncThunk để tạo thunk, cũng như client để gửi các yêu cầu API đến máy chủ.

Ngay sau khi khai báo đối tượng initialState, với sự trợ giúp của createAsyncThunk, hãy tạo một thunk fetchStudents để lấy danh sách sinh viên, nó sẽ gửi một yêu cầu GET tới địa chỉ /fakeServer/students, được chỉ định trong tệp server.js của bạn, và trả về response.data, như đã trình bày trong tài liệu bài học. Là tham số đầu tiên cho createAsyncThunk, hãy chỉ định chuỗi students/fetchStudents cho loại action.