Thêm Reducer vào Ứng dụng Redux

Trong bài học trước, chúng ta đã tạo một component UserReaction để mỗi sản phẩm cũng có các phản ứng của người dùng. Bây giờ chúng ta cần viết một reducer, sẽ xử lý bộ đếm phản ứng khi người dùng nhấp vào nút của một phản ứng cụ thể.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là tệp productsSlice.js chứa tất cả các reducer. Bây giờ trong thuộc tính reducers hãy tạo thêm một reducer reactionClicked (chúng ta có thể đặt nó đầu tiên - trước productAdded, mặc dù điều này không quan trọng). Như thường lệ, hãy truyền cho nó các tham số state và action:

reactionClicked(state, action) {},

Và bây giờ bên trong các dấu ngoặc nhọn mà chúng ta đã để trống ở bước trước, hãy viết mã cho nó. Trước hết, chúng ta sẽ trích xuất id sản phẩm từ payload của đối tượng action và tên của phản ứng:

const { productId, reaction } = action.payload

Sau đó, từ state được truyền, hãy lấy sản phẩm cần thiết:

const currentProduct = state.find(product => product.id === productId)

Và nếu sản phẩm đó tồn tại, thì hãy tăng giá trị của phản ứng được truyền lên 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Thế là xong, mã của chúng ta cho reactionClicked đã sẵn sàng:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Hãy ở cuối tệp, thêm xuất khẩu action creator đã tạo:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Cần lưu ý hai điểm quan trọng ở đây. Như bạn nhớ từ các bài học trước - việc cập nhật trực tiếp giá trị như vậy trong mã reducer là không được phép (hãy nhìn vào dòng này: reactions[reaction]++), nhưng chúng ta có thể bỏ qua điều này vì chúng ta đang làm điều đó bên trong createSlice, sử dụng thư viện Immer. Nó sẽ đảm bảo chuyển đổi mã của chúng ta thành một bản cập nhật giá trị "an toàn". Điều này cho phép chúng ta viết những thứ phức tạp theo cách đơn giản hơn.

Điều tiếp theo cần nhớ - đối tượng action phải chứa lượng thông tin tối thiểu có thể - chỉ đủ để chỉ ra điều gì đã xảy ra. Không nên thực hiện bất kỳ phép tính nào trong đó. Tất cả các phép tính để cập nhật state nên được thực hiện trong reducer, ở đây bạn có thể viết bao nhiêu logic tùy cần thiết.

Hãy mở ứng dụng về sinh viên của bạn và trong tệp studentsSlice.js hãy thêm một reducer nữa voteClicked vào trường reducers, như đã trình bày trong bài học. Hãy viết mã cho nó. Nhiệm vụ của reducer của bạn - khi nhấp vào sẽ tăng giá trị của vote (hoặc phiếu bầu), mà đã được nhấp, cho sinh viên đó, lên 1.

Ở cuối tệp, đừng quên xuất khẩu action creator đã tạo voteClicked.