Reducer và action trong Redux

Ở bài học trước, chúng ta đã hoàn thành biểu mẫu để thêm sản phẩm và hiển thị nó trên trang chủ. Tuy nhiên, dữ liệu được thêm vào hiện chưa được lưu lại, nói cách khác, sản phẩm mới không được thêm vào danh sách các sản phẩm hiện có trong store. Hãy sửa chữa điều này.

Đầu tiên, trong ứng dụng về sản phẩm của chúng ta, hãy mở tệp productsSlice.jsx và viết vào thuộc tính reducer của createSlice một hàm productAdded, hàm này sẽ chịu trách nhiệm thêm sản phẩm vào store dựa trên state hiện tại và action được truyền vào nó. Cần lưu ý rằng, ở đây chúng ta được truyền không phải toàn bộ state, mà chỉ phần state chịu trách nhiệm về sản phẩm (slice products chỉ biết về phần này). Đối tượng chứa sản phẩm mới sẽ nằm trong thuộc tính payload của đối tượng action, đối tượng này sẽ được tạo ra bởi trình xử lý sự kiện khi nhấn nút lưu trong biểu mẫu. Kết quả là, reducer productAdded sẽ trông như thế này trong mã createSlice:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Còn action thì sao? Ngay từ đầu cuốn sách giáo khoa chúng ta đã đề cập rằng action - là một sự kiện nào đó, được biểu diễn dưới dạng một đối tượng, mô tả những gì đã xảy ra trong ứng dụng. Chúng ta cũng đã nói rằng có thể sử dụng hàm action creator, hàm này sẽ tạo ra cho chúng ta một đối tượng như vậy, ví dụ như thế này:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Tin tốt là chúng ta không cần phải làm gì cả, và điều này sẽ được thực hiện thay cho chúng ta bởi hàm createSlice mà chúng ta sử dụng. Ngay khi chúng ta viết reducer, nó sẽ tự động tạo ra cho chúng ta action creator với cùng tên. Chúng ta chỉ cần xuất action creator đã tạo ra để sử dụng tiếp trong các component. Hãy thực hiện điều này ở cuối tệp, trước khi xuất reducer, như sau:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Hãy mở ứng dụng về sinh viên của bạn, sau đó mở tệp studentsSlice.jsx, bổ sung giá trị của trường reducer cho createSlice, như đã được trình bày trong bài học.

Thêm vào cuối tệp studentsSlice.jsx việc xuất hàm action creator đã tạo ra.