纯粹遵循 Redux 方式并有 Dump |表示组件答案

【问题标题】：Purely following Redux way and having Dump | Presentational components纯粹遵循 Redux 方式并有 Dump |表示组件
【发布时间】：2016-09-02 09:31:30
【问题描述】：

当您创建 React 组件时，您是否主要遵循仅将转储/展示性 React 组件连接到容器的理念？只有转储组件才能满足 redux（单一事实来源）的主要原则之一，但在组件隔离方面却很复杂。我的意思是：

...我最终有一个表格组件，它可以呈现数据并能够选择行，但是除非它通过容器连接到商店，否则选择不起作用。这在理论上很好，因为许多其他组件都依赖于该选择，因此通过商店的所有内容都可以保持所有内容同步。但是，这意味着 table 组件本身不能完全交互（如果它没有连接到 store，则选择将不起作用）。这可能会使自动化 UI 测试更难测试，因为每个组件都需要有一个相关的容器才能正常工作。

另一个例子；假设您有一个对话框，您是在组件本身中显示状态还是通过容器将其连接到商店？

有什么想法吗？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

我个人喜欢Presentational and Container Components方法。它使代码更清晰，更干净，更可重用。

其背后的想法是您的展示组件不得对数据执行任何操作，它纯粹是 UI。并且这些数据必须来自您的容器（来自 Redux Store，或者来自帮助程序类等）

最佳实践是通过 props 从容器组件中传递您的展示组件功能。

// Container Component

handleChange(e) {
  this.setState({ username : e })
}

render() {
  return (
    <Boarding
      placeholder={this.state.placeholder}
      error={this.state.error} 
      onChangeText={this.handleChange}
      name={this.props.FB_user.user_firstname}
      ProfilPicture={this.props.FB_user.user_picture} />
  )
}

export default connect((state) => ({
  FB_user: state.statusLogin,
}), {})(BoardingContainer)

这是一个简单的示例，说明如何将函数传递到您的演示组件（此处为 TextInput）并连接到它以取回在 TextInput 中输入的数据。

另外，如果你仔细观察，你会看到我传递了 this.props.FB_user.user_firstname && this.props.FB_user.user_picture，它来自我使用代码示例的最后几行连接到的 Redux 商店。

这里有一篇非常有名的 Medium 文章以获得更多详细信息：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.smfbi5hjj

希望对你有帮助，如果还有什么问题可以问我。

【讨论】：