React Redux在連接組件中使用HOC

我處於我的第一個React Native項目的中間。我想創建一個純粹處理同步api數據的HOC。這會包裹我所有的其他組件。React Redux在連接組件中使用HOC

如果我是正確的我DataSync部分將由在做出口的語句下面增強所有其他部件：

export default DataSync(SomeOtherComponent);

我掙扎的概念是SomeOtherComponent還取決於陣營終極版連接方法來檢索其他redux狀態。我的問題是我怎樣才能一起使用？像這樣？

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

我可能完全誤解這裏的概念，所以我真的很感激一些指針

編輯

爲了進一步解釋：

我的數據同步HOC將純粹的處理的同步應用程序之間的數據將成爲頂級組件。它需要訪問auth狀態，並將Redux中的數據（在本例中爲orders）設置爲所有其他組件。

嵌套在DataSync HOC中的組件需要訪問檢索到的數據，路由以及它們依次創建必須定期同步回服務器的狀態（訂單）。

來源

2016-11-29 mtwallet

是的，應該工作 –

可能這是你想要什麼：

個

DataSync.js

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

SomeOtherComponent.js你的孩子的組件

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

使用connect爲好。這裏是WHY

來源

2016-11-29 13:26:03

是的，connect也是HOC，你可以任意嵌套它們，因爲HOC返回一個組件。

HOC(HOC(...(Component)...))是確定的。

不過，我認爲你可能需要的是connect(...)(DataSync(YourComponent))而不是DataSync(connect(...)(YourComponent))，以便在需要DataSync也訪問state/props。這真的取決於用例。

來源

2016-11-29 12:59:18 lustoykov

感謝您的答覆。所以從本質上說，我嵌套它們的方式決定組件繼承的數據？這和其他任何組件關係一樣工作？ – mtwallet

你能詳細解釋一下你的問題嗎？如果DataSync嵌套在連接中，則它僅從連接繼承。每個嵌套HOC1都從每個外部HOC2,3,4 ...上面繼承。 HOC3（HOC2（HOC1））現在HOC1繼承HOC2和HOC3。 – lustoykov

下面是一個簡單的例子，它是如何工作

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))

有用HOC鏈接

希望它會幫助你

更新：修正了一個錯字

來源

2016-11-29 13:20:55

你可以用連接裝飾器來代替這個語法嗎？ –

我使用和@The理由所提到的相同的方法。這裏唯一的問題是，如果你映射你的動作，你將不會有dispatch（）可用。

我如何在遇到同樣的問題時設法使其正常工作的方式如下。

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

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

其中withPreFetch(firstLoadAction, ConnectedComponentWithActions)是HOC接受要發送的動作。

來源

2017-11-26 14:17:49 Ventura

React Redux在連接組件中使用HOC

回答

相關問題