0

我正在使用 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>

我的问题是我是否应该将每个组件（主页、搜索、收藏夹）连接到商店，或者我是否应该在我的应用程序 (app.js) 组件中这样做并将动作和状态作为道具传递给每个场景组件。

我有以下行动：

  • 获取最近（）
  • searchByKeywords(关键词)
  • searchByCategory(categoryId)
  • addToFavorites(photoId)
  • removeFromFavorites(photoId)

以及以下减速器：

  • 照片结果
  • 最爱

请让我知道在这里设置的最佳方式。我应该连接到每个组件中的状态和操作，还是在 App 组件级别（定义路由器场景的位置）执行一次并向下传递。 

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

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

2 回答 2

0

我应该连接到每个组件中的状态和操作，还是在 App 组件级别（定义路由器场景的位置）执行一次并向下传递。

最佳实践是在组件级别调用操作。使商店在全球范围内可访问。您需要做的就是从您的组件中调用操作。这对于确保应用程序的模块化很重要。

于 2016-10-12T08:54:08.040 回答
0

正如 Dan Abramov在此处解释的那样，我一直在使用的方法是将应用程序拆分为智能组件和愚蠢组件。然后我使用connect将状态输入智能组件并将道具传递给愚蠢的组件。

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

于 2016-10-12T08:35:51.397 回答