React Router chờ giải quyết

Question

Tôi đến từ Angular và sử dụng khả năng phân giải của ui-router giúp dễ dàng đợi và đưa kết quả vào bộ điều khiển.

Hiện tại, tôi muốn bắt chước điều này bằng phản ứng mà không phải viết yêu cầu (hoặc kích hoạt hành động) trong phương thức componentWillMount khi sử dụng Bộ định tuyến phản ứng. Tôi nghĩ rằng có một cách tốt hơn để làm điều đó, tôi chỉ không tìm ra điều gì.

Rất thích nhận được một số lời khuyên hoặc chỉ cho tôi đến nơi tôi có thể học cách làm như vậy

Answer 1

Tốt nhất là sử dụng callback trong Router.run (http://rackt.github.io/react-router/#Router.run). Gọi lại bạn vượt qua để mà được gọi là bất cứ khi nào thay đổi url, và đó là trách nhiệm tái dựng hình, giống như ví dụ này lấy từ trang:

Router.run(routes, function (Root) { 
    // whenever the url changes, this callback is called again 
    React.render(<Root/>, document.body); 
}); 

Trong chức năng đó, bạn có thể làm bất kỳ hoạt động async bạn cần trước khi gọi React.render(), như sau:

Router.run(routes, function (Root) { 
    // whenever the url changes, this callback is called again 
    asyncStuff().then(function (data) { 
    React.render(<Root data={data} />, document.body); 
    }); 
}); 

Vấn đề với cách tiếp cận này là giao diện người dùng của bạn sẽ không phản ứng cho đến khi có dữ liệu đó. Thay vào đó, tôi khuyên bạn nên kết xuất thành phần của bạn với trạng thái trống và tìm nạp dữ liệu trong componentDidMount rồi tái xuất hiện khi dữ liệu được nhập. Hoặc thậm chí tốt hơn, tách dữ liệu tìm nạp và hiển thị thành hai thành phần. Một thành phần tìm nạp dữ liệu và chuyển thành thành phần hiển thị dưới dạng thuộc tính. Các thành phần dữ liệu lấy thậm chí có thể tránh render các thành phần khác, trừ khi dữ liệu ở đó, một cái gì đó như:

render: function() { 
    if (this.state.data) { 
    return <TheComponent data={this.state.data} />; 
    } else { 
    return <Spinner />; 
    } 
} 

Đây là một mô hình phổ biến ở Phản ứng, với các thành phần mà đề với dữ liệu lấy và tiểu bang, và các thành phần mà làm cho tách trạng thái đó. Bạn muốn đẩy các thành phần có trạng thái lên cấp bậc cao nhất có thể bởi vì nó tạo ra một ranh giới logic. Các thành phần stateful là nơi mà 90% các lỗi xảy ra, và nó là tốt đẹp để có thể tập trung vào những người khi bạn đang săn lỗi.

Một vấn đề khác khi chờ đợi là người dùng có thể điều hướng nhanh chóng, nghĩa là cuộc gọi lại Router.run được gọi lại trước khi dữ liệu đầu tiên được đưa vào. Vì vậy, bạn cần đảm bảo bạn hủy thao tác cuối cùng và không hiển thị điều đó.