React Redux sử dụng HOC với thành phần được kết nối

Question

Tôi đang ở giữa dự án React Native đầu tiên của mình. Tôi muốn tạo ra một HOC giao dịch hoàn toàn với đồng bộ dữ liệu từ một api. Điều này sau đó sẽ bọc tất cả các thành phần khác của tôi.

Nếu tôi sửa thành phần DataSync của tôi sẽ tăng cường tất cả các thành phần khác bằng cách làm như sau trong báo cáo kết quả xuất khẩu:

export default DataSync(SomeOtherComponent);

Khái niệm Tôi đang phải vật lộn với là SomeOtherComponent cũng phụ thuộc vào các Phản ứng Redux Connect phương pháp để lấy trạng thái redux khác. Câu hỏi của tôi là làm thế nào tôi có thể sử dụng cả hai với nhau? Một cái gì đó như thế này?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

tôi có thể hoàn toàn hiểu lầm khái niệm ở đây vì vậy tôi sẽ thực sự đánh giá cao một số gợi ý

EDIT

Để giải thích thêm:

DataSync hoc my thuần túy sẽ xử lý các đồng bộ của dữ liệu giữa ứng dụng và sẽ là thành phần cấp cao nhất. Nó sẽ cần truy cập vào trạng thái auth và sẽ thiết lập dữ liệu trong Redux (trong trường hợp này là lệnh) cho tất cả các thành phần khác.

Các thành phần được lồng trong HOC DataSync cần quyền truy cập vào dữ liệu, tuyến đường đã truy xuất và lần lượt tạo trạng thái (đơn đặt hàng) phải được đồng bộ hóa lại với máy chủ theo định kỳ.

Answer 1

Có thể đây là những gì bạn muốn:

DataSync.js

export default connect(mapStateToProps, mapDispatchToProps)(DataSync); 

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent)); 

Sử dụng connect vào các thành phần con của bạn là tốt.Đây là WHY

Answer 2

Có, connect cũng là HOC và bạn có thể lồng chúng tùy ý vì số HOC trả về một thành phần.

HOC(HOC(...(Component)...)) là OK.

---

Tuy nhiên, tôi nghĩ rằng những gì bạn có thể cần là connect(...)(DataSync(YourComponent)) thay vì DataSync(connect(...)(YourComponent)) để DataSync cũng có thể truy cập vào state/props nếu cần thiết. Nó thực sự phụ thuộc vào trường hợp sử dụng.

Answer 3

Đây là một ví dụ đơn giản như thế nào nó hoạt động

const AppWrapper = MainComponent => 
    class extends Component{ 
    componentWillmount(){ 
     this.props.fetchSomething() 
    } 
    componentDidUnmount(){ 
     this.props.push('/') 
    } 
    render(){ 
     return (
     <div> 
      {this.props.fetchedUsers === 'undefined' ? 
      <div> Do somethig while users are not fetched </div> : 
      <MainComponent {...this.props}/>} 
     </div> 
    ) 
    } 
    } 



const App = ({users}) => { 
    // just example, you can do whatever you want 
    return <div>{JSON.stringify(users)}</div> 
}; 

// mapStateToProps will be in HOC -> Wrapper 
// mapDispatchToProps will be in HOC -> Wrapper 

/* you may use DataSync as you want*/ 
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App)) 

hữu ích HOC liên kết

Hy vọng nó sẽ giúp bạn

Cập nhật: sửa chữa một lỗi đánh máy

Answer 4

Tôi sử dụng và giống như cách tiếp cận tương tự mà @ Lý do đã đề cập. Vấn đề duy nhất ở đây là nếu bạn lập bản đồ hành động của bạn, bạn sẽ không có công văn() có sẵn.

Cách tôi quản lý để làm cho nó hoạt động trong trường hợp ai đó đang đối mặt với cùng một vấn đề là như sau.

const ConnectedComponentWithActions = connect(
() => { return {}; }, 
    { myAction }, 
)(ViewComponent); 

export default connect(
    state => state, 
    null, 
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions)); 

Trong trường hợp withPreFetch(firstLoadAction, ConnectedComponentWithActions) là HOC chấp nhận hành động được gửi đi.