Các thuật ngữ chính trong Redux

Trong bài học này, chúng ta sẽ điểm qua một cách ngắn gọn các khái niệm và thuật ngữ chính, việc nắm vững chúng là cần thiết cho việc học Redux tiếp theo.

Chúng ta sẽ bắt đầu với hành động (action). Đó là một sự kiện mô tả điều gì đã xảy ra trong ứng dụng của chúng ta. Về mặt kỹ thuật, nó là một đối tượng JavaScript thông thường, chứa trường type, nơi chúng ta ghi tên của hành động.

Trường quan trọng thứ hai trong đối tượng hành động là trường payload. Nó sẽ chứa dữ liệu tải trọng của hành động. Dữ liệu tải trọng được hiểu là một số dữ liệu được truyền dưới dạng tham số vào hành động.

Ngoài ra, trong đối tượng này cũng có thể có các trường khác với thông tin bổ sung.

Hãy tạo một hành động làm ví dụ và đặt tên nó là addOrderAction. Giả sử nó chịu trách nhiệm thêm một đơn hàng. Điều đó có nghĩa là trong thuộc tính type, chúng ta sẽ chỉ định rằng đơn hàng đã được thêm (orderAdded) vào danh sách đơn hàng (orders). Còn trong payload, chúng ta sẽ chỉ định chi tiết hơn, đơn hàng đó là gì, ví dụ - sơn tường:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Để không phải viết thủ công đối tượng hành động mỗi lần, chúng ta có thể sử dụng cái gọi là action creator - một hàm sẽ tạo và trả về cho chúng ta đối tượng hành động. Hãy đặt tên nó là addOrder. Chúng ta sẽ truyền cho nó văn bản cần thiết cho thuộc tính payload dưới dạng tham số:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Khái niệm quan trọng tiếp theo trong chuỗi là reducer - một hàm nhận trạng thái hiện tại và đối tượng hành động. Hàm này quyết định cách cập nhật trạng thái và trả về state đã được cập nhật nếu cần thiết.

Khái niệm tiếp theo - kho lưu trữ (store) - đây là một đối tượng, nơi lưu trữ trạng thái toàn cục hiện tại của ứng dụng Redux. Đối tượng này có phương thức getState, sử dụng nó có thể lấy được giá trị hiện tại của state.

Kho lưu trữ cũng có phương thức dispatch. Gọi nó và truyền một đối tượng hành động - đó là cách duy nhất để thay đổi state. Kết quả là store sẽ chạy hàm reducer và lưu giá trị state mới cho chính nó.

Và khái niệm cuối cùng, chúng ta sẽ xem xét trong bài học này - đó là selector. Selector là các hàm đặc biệt, biết cách trích xuất thông tin từ state nằm trong kho lưu trữ. Những hàm này đặc biệt hữu ích khi ứng dụng phát triển và giúp tránh lặp lại mã.

Chúng ta sẽ tìm hiểu chi tiết hơn về tất cả các khái niệm này và về việc áp dụng chúng vào thực tế từ các phần tiếp theo của giáo trình này.