Реагировать - это плохая практика использовать несколько вызовов API в компоненте приложения

Question

Я работаю с данными API, полученными из таблицы, которая имеет много связей с другими таблицами. Он использует справочные таблицы и таблицы соединений. Я должен использовать эти данные для нескольких (если не для всех) компонентов. Разве плохо делать все вызовы API прямо в компоненте App.js / root? Почему или почему нет?

РЕДАКТИРОВАТЬ : в настоящее время я использую избыточность и думаю о сохранении всех значений таблицы ссылок в глобальном состоянии, поэтому я могу выполнить поиск там, где это необходимо.

пример ответа из API

{
  "name": "Adam"
  "schoolId": 2,
  "countryId": 6,
}

Справочная таблица примеров школ

{
  "id": 2,
  "name": "High School",
}

Справочная таблица примеров стран

{
  "id": 6,
  "name": "Bulgaria"
}

Приложение. js

function App({ getCountries, getSchools }) {
  // Get all reference table data
  useEffect(() => {
    getCountries();
    getSchools();
    // get...(); All other reference tables
  }, [
    getCountries,
    getSchools,
  ]);

  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Fragment>
            <div className="d-flex align-items-stretch wrapper">
              <div id="sidebar">
                <div className="sidemenu position-fixed">
                  <Sidebar />
                </div>
              </div>
              <div className="content">
                <Navbar />
                <main className="container-fluid">
                  <Switch>
                    <Route component={Routes} />
                  </Switch>
                </main>
              </div>
            </div>
          </Fragment>
        </Router>
      </div>
    </Provider>
  );
}

export default connect(null, { getCountries, getSchools })(App);

Answer 1

Вызов всех API в компоненте root вашего приложения создает риск повторного рендеринга всего вашего приложения при изменении крошечных данных. Лучше иметь дочерние компоненты в API-интерфейсе вызова дерева рендеринга для извлечения крошечных кусочков данных, которые им нужны, когда это возможно, я бы сказал, используя хук useEffect или соответствующие API, если вы используете компоненты на основе классов. , Таким образом, изменение одного фрагмента данных приводит к повторному отображению определенного компонента, но оставляет другие компоненты в DOM нетронутыми.

Для дальнейшего повышения производительности вы вводите в игру библиотеку управления состояниями, такую ​​как Redux, и выполняете ее. использование кэширования.

Не рекомендуется вызывать API для получения данных, которые пока не нужны. Это влечет за собой ненужные расходы и излишнюю нагрузку на ресурсы обработки.

Answer 2

Как опытный разработчик React, я скажу некоторую структуру, которую вы можете сделать в своем коде реагирования, чтобы выглядеть профессионально;

Переместите все свои API в файл API; я имею в виду создать файл api.js и поместить туда все свои API

не вызывать ваши API в основном файле jsx (js), используйте redux и в действиях redux вызывайте их и сохраняйте данные в redux, вы можете использовать их в своем приложении

использовать метод await asyn c для ваших запросов

Я надеюсь, что эти цитаты могут помочь вам.

Answer 3

Лучше вызывать несколько api из action (redux). для больших, многоразовых, масштабируемых приложений используйте redux , чтобы вы могли обрабатывать состояние во всем приложении.

Если ваше приложение не так велико и вы хотите, чтобы все вызовы API из реагировали только тогда Лучше использовать многоразовую (общую) функцию, передавая каждый API в эту функцию для написания четкого и краткого описания.