Flux: Làm thế nào để thực hiện một hành động chờ đợi cho một cửa hàng?

Question

Tôi đang buộc bản thân mình vào nút thắt với một vấn đề React mà tôi chắc chắn không thể khó khăn như nó có vẻ với tôi ngay bây giờ.

Tôi đang xây dựng một ứng dụng trang duy nhất đối với API máy chủ RESTful trả về tài nguyên, cùng với các liên kết mô tả những gì có thể được thực hiện với tài nguyên đó. Và tôi đang cố gắng đảm bảo rằng ajax của khách hàng của tôi chỉ sử dụng các URL được truy xuất từ ​​máy chủ theo cách này. Vì vậy, ví dụ, LoggedInSessionStore của tôi chứa URL cho phép tôi lấy danh sách tất cả các tài liệu công cộng, nói.

Vấn đề tôi có là cách quản lý sự phụ thuộc giữa các hành động và cửa hàng. Ví dụ, khi hành động tìm nạp tất cả các tài liệu công khai phát sinh, nó cần lấy URL của nó từ LoggedInSessionStore. Nhưng cửa hàng đó có thể chưa được phổ biến; do đó, hành động không được kích hoạt cho đến khi hành động trước đó (tìm nạp phiên đăng nhập) đã hoàn tất.

Vì vậy, tôi muốn một hành động có thể tìm nạp dữ liệu máy chủ bằng URL được lưu trữ trong cửa hàng. Cách được chấp nhận để đảm bảo rằng hành động không thể kích hoạt cho đến khi cửa hàng đó được phổ biến là gì?

Answer 1

TL; DR Không lưu trữ URL của bạn trong Cửa hàng. Hãy để các hành động của bạn xử lý các cuộc gọi API.

Nói chung khi sử dụng thông lượng, hành động của bạn không nên biết về cửa hàng của bạn. Dữ liệu trong một ứng dụng Flux có nghĩa là chảy theo một hướng:

Components --> Actions --> Dispatcher --> Stores --> Components 

Các thành phần React của bạn tạo ra các hành động, sau đó được Dispatcher gửi đến cửa hàng của bạn. Cửa hàng sẽ được thông báo về các hành động thông qua cuộc gọi lại đã đăng ký của họ và sẽ tự cập nhật cho phù hợp. Các thành phần sẽ lắng nghe cho các cửa hàng để cập nhật bản thân và họ sẽ cập nhật trạng thái riêng của họ cho phù hợp. Vì vậy, vòng tròn được hoàn thành.

Điểm phúc: Actions không nên phụ thuộc vào cửa hàng

Những gì tôi sẽ đề nghị là bạn di chuyển tất cả các logic API của bạn thành hành động. Điều này bao gồm các URL cho API của bạn. Đây là một mẫu khá phổ biến trong các ứng dụng Flux:

1. Thành phần kích hoạt hành động tìm nạp trên componentDidMount. Hiển thị trình tải bản vẽ vì nó chưa có dữ liệu cần để hiển thị.
2. Tác vụ tìm nạp thực hiện cuộc gọi AJAX để tìm nạp dữ liệu từ máy chủ.
3. Khi dữ liệu trở lại từ máy chủ, các hành động công văn nó như là một tải trọng
4. Một cửa hàng thấy tải trọng và đặt trạng thái nội bộ của mình dựa trên các dữ liệu tải xuống
5. Thành phần thấy rằng các cửa hàng đã được cập nhật, và cập nhật trạng thái riêng cho phù hợp. Điều này khiến cho ứng dụng hiển thị ứng dụng thay vì chỉ một trình tải xuống.

Tùy chọn thay thế có logic tìm nạp bên trong cửa hàng của bạn, bao gồm mã yêu cầu AJAX. Tôi tìm thấy những lý do dễ dàng hơn trước đây (cửa hàng không biết gì, họ chỉ phản ứng với dữ liệu khi có sẵn) nhưng nó tùy thuộc vào bạn như thế nào bạn muốn thực hiện nó. Chỉ cần đảm bảo rằng logic tìm nạp API là ở một nơi chỉ, không được phân tách giữa Hành động và Cửa hàng.

Chủ đề này cũng có thể hữu ích: Should flux stores, or actions (or both) touch external services?