如何将组件与其自身的数据获取需求分离

Question

当一个组件需要在渲染之前获取一组特定的数据时，我通常会按照这些思路做一些事情：

class Comp extends Component {
  componentWillMount() {
    this.props.requestData() // triggeres in action in the wrapper
  }
  render() {
    const { data } = this.props.
    return (
       <div>
         {/* do something with data */}
       </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Comp)

现在我有两个 React SPA，我想在其中使用这个组件。在一个应用程序中，需要在安装组件之前获取所需的数据，而在另一个应用程序中，数据已经存在。所以我想知道，对于作为组件先决条件的获取数据的问题，是否有任何最佳实践。有没有办法让包装器监听 Comp 的生命周期？我是否应该将 requestData 重命名为 onComponentWillMount 并听取它以触发动作？

理想情况下，组件不应该关心是否或何时获取。

Answer 1

您可以在路由定义中将 requestData 操作创建者调用移动到 React Router 事件 "onEnter"。通过这种方式，组件与获取操作创建者分离。

Answer 2

您可以创建一个 HoC（高阶组件）来包装您的原始 Comp 组件并获取 onComponentWillMount（和 onComponentWillReceiveProps）上的数据。当您使用 redux 时，我想您的 requestData() 回调正在创建一个将数据分派到全局存储的 redux 操作。或者，如果数据是该组件的本地数据，您可以将其保存在 HoC 的状态中。

如何将组件与其自身的数据获取需求分离

How to decouple a Component from it's own data fetching needs

flux

reactjs

redux