Chuẩn bị dữ liệu cho đối tượng action trong Redux

Gần đây chúng ta đã nói về việc hàm createSlice mong đợi một đối số khi tạo action.payload. Một mặt điều này đơn giản hóa việc sử dụng nó, mặt khác có thể yêu cầu các thao tác bổ sung để chuẩn bị nội dung cho đối tượng action.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở tệp NewProductForm.jsx. Hãy chú ý đến dòng mã sau:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Ở đây chúng ta đang lắp ráp đối tượng payload ngay trong thành phần React và chuyển nó vào action productAdded. Nếu chúng ta phải gửi action tương tự từ nhiều thành phần hoặc logic để lắp ráp trở nên phức tạp thì sao? Về lý tưởng, thành phần của chúng ta không nên quan tâm đối tượng trong payload cho action này trông như thế nào. Hơn nữa, chúng ta không hài lòng với việc mã liên tục bị trùng lặp.

Những vấn đề này một lần nữa có thể được giải quyết bởi createSlice nổi tiếng của chúng ta, vì khi viết reducer, nó cho phép chúng ta sử dụng hàm callback prepare, trong đó có thể viết nhiều loại logic khác nhau, tạo số ngẫu nhiên, v.v. Trong trường hợp như vậy, giá trị cho trường reducer có thể được biểu diễn dưới dạng đối tượng sau:

{reducer, prepare}

Hãy mở tệp productsSlice.js của chúng ta và thay đổi mã cho reducer productAdded. Bây giờ đoạn mã này:

productAdded(state, action) {
	state.push(action.payload)
},

Chúng ta sẽ thay đổi thành như sau, trong đó hàm reducer sẽ đảm nhận việc cập nhật state trong store, còn prepare - trả về đối tượng payload với id được tạo và các dữ liệu khác của chúng ta:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Vì bây giờ chúng ta sẽ tạo id ở đây, chứ không phải trong thành phần, hãy thêm nanoid vào phần import:

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

Cuối cùng, hãy thực hiện các thay đổi trong NewProductForm.jsx. Thay vì dòng:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Chúng ta sẽ có dòng như thế này, trong đó chúng ta chỉ đơn giản truyền các dữ liệu cần thiết qua dấu phẩy (đừng quên trong tệp này, hãy xóa nanoid khỏi phần import):

dispatch(productAdded(name, desc, price, amount))

Hãy chạy ứng dụng, sau đó tạo một sản phẩm mới và đảm bảo rằng chúng ta không làm hỏng bất cứ thứ gì.

Hãy mở ứng dụng sinh viên của bạn. Trong tệp StudentsSlice.js, hãy viết lại reducer studentAdded của bạn sao cho nó ở dạng đối tượng {reducer, prepare}, như được hiển thị trong bài học.

Hãy thực hiện các thay đổi tương ứng trong tệp NewStudentForm.jsx, như được hiển thị trong bài học. Chạy ứng dụng và đảm bảo rằng mọi thứ hoạt động như trước đây.