React + Redux设置为我的React -native应用程序.处理连接的正确方法是什么?

Question

我正在使用react-native-router-flux库构建一个简单的react-native应用。

我只有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>

我的问题是我是否应该将每个组件(Home, Search, Favorites)连接到商店，或者我是否应该在我的App (App .js)组件中这样做，并将动作和状态作为道具传递给每个场景组件。

我有以下动作:

• getRecent ()
• searchByKeywords(关键词)
• searchByCategory(被)
• addToFavorites (photoId)
• removeFromFavorites (photoId)

及以下减速机:

• photoResults
• 最爱

请让我知道在这里设置的最佳方法。我应该连接到每个组件中的状态和动作，还是在应用组件级别(路由器场景定义的地方)做一次，然后传递下去?

function mapStateToProps(state) {
  return {
    photoResults: state.photoResults,
    favorites: state.favorites
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

Answer 1

我一直使用的方法是将应用程序分成智能和非智能组件，Dan Abramov在这里解释了这一点。然后，我使用connect将状态馈送到智能组件，并将道具传递给哑组件。

这允许您在许多地方重用哑组件，因为它们没有绑定到特定的状态。

Answer 2

我应该连接到每个组件中的状态和动作，还是在应用组件级别(路由器场景被定义的地方)做一次，然后传递下去?

最佳实践是在组件级别调用操作。使商店全局可访问。您所需要做的就是从组件调用操作。这对于确保应用的模块化非常重要。