React + Redux 为我的 react-native 应用程序设置。处理连接的正确方法是什么？答案

【问题标题】：React + Redux set up for my react-native app. What is the correct way to handle connect?React + Redux 为我的 react-native 应用程序设置。处理连接的正确方法是什么？
【发布时间】：2017-02-20 21:06:51
【问题描述】：

我正在使用 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) 组件中这样做并将动作和状态作为道具传递给每个场景组件。

我有以下操作：

getRecent()
searchByKeywords(关键字)
按类别搜索(categoryId)
addToFavorites(photoId)
removeFromFavorites(photoId)

还有以下减速器：

照片结果
收藏夹

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

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

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

【问题讨论】：

标签： react-native redux react-redux jsx react-native-router-flux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：