2016-10-12 44 views
0

我正在使用react-native-router-flux庫構建一個簡單的react-native應用程序。React + Redux設置爲我的反應原生應用程序。什麼是處理連接的正確方法?

我只有3個場景:

  • 首頁
  • 搜索
  • 收藏

我在app.js他們定義爲諸如這樣的:

<Router> 
    <Scene key="root"> 
    <Scene 
     key="home" 
     component={Home} 
    /> 
    <Scene 
     key="search" 
     component={Search} 
    /> 
    <Scene 
     key="favorites" 
     component={Favorites} 
    /> 
    </Scene> 
</Router> 

在我的setup.js,我有以下幾點:

<Provider store={store}> 
    <App /> 
</Provider> 

我的問題是我應該每個組件(主頁,搜索,收藏夾)被連接到商店,或者我應該做的事情,在我的應用程序(app.js)組件並將動作和狀態作爲道具傳遞給每個場景組件。

我有下列行爲:

  • getRecent()
  • searchByKeywords(關鍵字)
  • searchByCategory(的categoryId)
  • 添加addToFavorites(PHOTOID)
  • removeFromFavorites(PHOTOID)

以下還原劑:

  • photoResults
  • 收藏

請讓我知道要在這裏設立的最佳途徑。我應該連接到每個組件的狀態和操作,還是應用組件級別(路由器場景已定義的位置)並傳遞一次。

function mapStateToProps(state) { 
    return { 
    photoResults: state.photoResults, 
    favorites: state.favorites 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actionCreators, dispatch) 
    }; 
} 

回答

0

的方法,我一直在使用是將應用程序劃分爲智能和啞組件丹阿布拉莫夫解釋here。然後,我使用connect將狀態饋入智能組件,並將道具傳遞給啞巴組件。

這使您可以在許多地方重複使用啞組件,因爲它們並未綁定到特定狀態。

0

我應該連接到每個組件的狀態和操作,還是應用組件級別(路由器場景已定義的位置)並傳遞一次。

最佳做法是調用組件級別的操作。使商店全球可訪問。你所需要做的就是從你的組件調用動作。這對確保您的應用程序的模塊化非常重要。

相關問題