Получение данных для всего приложения вне зависимости от логики компонента

Question

Во внешнем интерфейсе есть X маршрутов, созданных с помощью React-router, и каждый из них ведет к компоненту.

Независимо от того, какой маршрут посещается, мне нужно использовать некоторые данные из api.

Эти данные постоянны через приложение. Используя Redux, я мог отправлять действие FETCH_DATA в каждый компонент React и управлять logi c выборки в действиях Redux. все компоненты React, которым нужны данные: ищите данные в магазине. Если есть, бери. Если его там нет, отправьте FETCH_DATA.

Какой еще подход?

Answer 1

GraphQL предлагает элегантное решение для этого требования обмена данными между компонентами, принадлежащими разным маршрутам.

Дополнительная информация:

https://www.youtube.com/watch?v=p_kqcGW1jkY

Apollo GraphQL (React) Обмен данными между компонентами

Answer 2

Вы можете вызвать этот api в App.tsx, т.е. ваш первый компонент, который будет отображаться в приложении. Это компонент, который на самом деле также содержит Routes.

Рассмотрим следующий код в качестве примера и изменим его в соответствии с потребностями вашего приложения:

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

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

export default App;

Теперь каждый компонент, который любой из ваших Route рендеров должен просто получить данные из redux store, используя mapStateToProps в react-redux Connect