Redux - Hành động

Các hành động là nguồn thông tin duy nhất cho cửa hàng theo tài liệu chính thức của Redux. Nó mang một lượng lớn thông tin từ ứng dụng của bạn để lưu trữ.

Như đã thảo luận trước đó, các hành động là đối tượng JavaScript thuần túy phải có thuộc tính type để chỉ ra loại hành động được thực hiện. Nó cho chúng ta biết những gì đã xảy ra. Các loại phải được định nghĩa là hằng số chuỗi trong ứng dụng của bạn như được cung cấp bên dưới:

const ITEMS_REQUEST = 'ITEMS_REQUEST';

Ngoài thuộc tính type này, cấu trúc của một đối tượng action hoàn toàn phụ thuộc vào nhà phát triển. Bạn nên giữ đối tượng hành động của mình càng nhẹ càng tốt và chỉ chuyển những thông tin cần thiết.

Để thực hiện bất kỳ thay đổi nào trong cửa hàng, trước tiên bạn cần thực hiện một hành động bằng cách sử dụng hàm store.dispatch (). Đối tượng hành động như sau:

{ type: GET_ORDER_STATUS , payload: {orderId,userId } }
{ type: GET_WISHLIST_ITEMS, payload: userId }

Người tạo Hành động

Người tạo hành động là các chức năng gói gọn quá trình tạo một đối tượng hành động. Các hàm này chỉ đơn giản trả về một đối tượng Js thuần túy là một hành động. Nó thúc đẩy việc viết mã sạch và giúp đạt được khả năng tái sử dụng.

Hãy để chúng tôi tìm hiểu về trình tạo hành động cho phép bạn gửi một hành động, ‘ITEMS_REQUEST’yêu cầu dữ liệu danh sách mặt hàng sản phẩm từ máy chủ. Trong khi đó,isLoading trạng thái được thực hiện đúng trong loại hành động 'ITEMS_REQUEST' để chỉ ra rằng các mục đang tải và dữ liệu vẫn không được nhận từ máy chủ.

Ban đầu, trạng thái isLoading là sai trong initialStateđối tượng giả định không có gì đang tải. Khi dữ liệu được nhận tại trình duyệt, trạng thái isLoading sẽ được trả về là false trong loại hành động 'ITEMS_REQUEST_SUCCESS' trong trình thu gọn tương ứng. Trạng thái này có thể được sử dụng như một chỗ dựa trong các thành phần phản ứng để hiển thị trình tải / thông báo trên trang của bạn trong khi yêu cầu dữ liệu được bật. Người tạo hành động như sau:

const ITEMS_REQUEST = ‘ITEMS_REQUEST’ ;
const ITEMS_REQUEST_SUCCESS = ‘ITEMS_REQUEST_SUCCESS’ ;
export function itemsRequest(bool,startIndex,endIndex) {
   let payload = {
      isLoading: bool,
      startIndex,
      endIndex
   }
   return {
      type: ITEMS_REQUEST,
      payload
   }
}
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      isLoading: bool,
   }
}

Để gọi một hàm điều phối, bạn cần chuyển hành động làm đối số cho hàm điều phối.

dispatch(itemsRequest(true,1, 20));
dispatch(itemsRequestSuccess(false));

Bạn có thể gửi một hành động bằng cách sử dụng trực tiếp store.dispatch (). Tuy nhiên, có nhiều khả năng bạn truy cập nó bằng phương thức trình trợ giúp react-Redux được gọi làconnect(). Bạn cũng có thể dùngbindActionCreators() phương pháp để ràng buộc nhiều người tạo hành động với chức năng điều phối.