在不依赖组件逻辑的情况下获取整个应用程序的数据答案

【问题标题】：Fetch data for the entire app without depending on component logic在不依赖组件逻辑的情况下获取整个应用程序的数据
【发布时间】：2020-09-17 21:04:42
【问题描述】：

前端有 X 条由 React-router 制作的路由，每条路由都驱动到一个组件。

无论访问哪个路由，我都需要使用来自api的一些数据。

此数据在应用程序中是恒定的。使用 Redux，我可以在每个 React 组件中调度一个动作 FETCH_DATA，并管理在 Redux 动作中获取的逻辑。

但是，这对我来说似乎是重复的，因为我将通过所有需要数据的 React 组件编写相同的逻辑：在存储中查找数据。如果有就拿走。如果不存在，则调度 FETCH_DATA。

什么是另一种方法？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您可以在 App.tsx 中调用该 API，即您要在应用程序中呈现的第一个组件。这是实际上也包含Routes 的组件。

以以下代码为例，并根据您的应用程序的需要进行更改：

class App extends React.Component {
  ComponentDidMount() {
    this.props.callTheApiHere()
  }

  render() {
    return (
      <Routes history={this.props.history} />
    )
  }
}

export default App;

现在，任何 Route 渲染的每个组件都必须使用 mapStateToProps 中的 mapStateToProps 从 redux store 获取数据react-redux Connect

【讨论】：

这个答案有点旧但很有用。我将其标记为已接受 :) 我用类似的概念应用了它，但使用了钩子。谢谢。

【解决方案2】：

GraphQL 为跨属于不同路由的组件共享数据这一需求提供了一个优雅的解决方案。

Apollo GraphQL (React) Data sharing across components

【讨论】：