javascript - 纯粹遵循 Redux 方式并进行 Dump |展示组件

Question

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

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

另一个例子；假设您有一个对话框，您是否可以在组件本身内显示状态，或者通过容器将其连接到存储？

有什么想法吗？

Answer 1

我个人喜欢演示和容器组件方法。它使代码更清晰、更干净并且更可重用。

其背后的想法是，您的展示组件不得对数据执行任何操作，它纯粹是 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 中输入的数据。

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

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

希望这对您有所帮助，如果您还有任何问题，请询问我。