Thay đổi dữ liệu sản phẩm trong Redux store

Chúng ta đã học cách thêm sản phẩm, vậy nếu chúng ta muốn thay đổi thông tin về sản phẩm thì sao? Hãy cùng xem cách thực hiện điều đó trong bài học này và các bài học tiếp theo.

Hãy mở ứng dụng sản phẩm của chúng ta và đi đến tệp productsSlice.js. Chúng ta sẽ bắt đầu bằng việc cần viết thêm một reducer nữa cho slice products, reducer này sẽ được kích hoạt khi cập nhật sản phẩm. Hãy đặt tên nó là productUpdated và thêm vào trường reducers sau reducer productAdded. Đồng thời truyền ngay cho nó các tham số state và action, dựa trên đó, như chúng ta nhớ, reducer hoạt động:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Bây giờ hãy suy nghĩ xem chúng ta cần những dữ liệu nào để cập nhật sản phẩm. Trước hết là id, thông qua nó chúng ta có thể tìm thấy sản phẩm mà chúng ta quan tâm trong store. Các dữ liệu còn lại - tên, mô tả, giá và số lượng sẽ được chúng ta dùng để thay đổi. Tất cả các giá trị này chúng ta sẽ nhận được từ thuộc tính payload của đối tượng action, đối tượng sẽ đến với chúng ta, và, nếu chúng ta viết nó bằng tay, thì nó sẽ trông như thế này, như được hiển thị dưới đây. Lưu ý rằng giá trị mong đợi của thuộc tính payload - là một đối số, vì vậy chúng ta sẽ truyền vào đây một đối tượng (chúng ta sẽ nói về điều này trong phần tiếp theo):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Sau khi làm rõ những điểm chính, bây giờ chúng ta có thể viết code trong dấu ngoặc nhọn cho productUpdated. Đầu tiên hãy lấy từ đối tượng action dữ liệu đã thay đổi:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Bây giờ chúng ta sẽ tìm sản phẩm cần thay đổi theo id đã nhận được:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Nếu sản phẩm như vậy được tìm thấy trong store, thì chúng ta sẽ thay thế dữ liệu của nó bằng các giá trị mới:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Chúng ta chỉ cần xuất action creator để sử dụng trong component, điều mà createSlice sẽ hào phóng tạo ra cho chúng ta. Hãy thêm nó vào phần xuất ở cuối tệp, cùng với productAdded hiện có:

export const { productAdded, productUpdated } = productsSlice.actions

Hãy mở ứng dụng sinh viên của bạn. Sau khi nghiên cứu tài liệu bài học, trong tệp studentsSlice.js hãy viết thêm một reducer cho productsSlice, reducer này sẽ cập nhật dữ liệu sinh viên trong store trong trường hợp người dùng thay đổi chúng. Hãy đặt tên nó là studentUpdated.

Và trong trường hợp này, đối tượng action của bạn sẽ trông như thế nào? Hãy gửi code của nó trong câu trả lời.

Ở cuối tệp, hãy xuất action creator studentUpdated đã nhận được.