Получение данных из внешнего API перед рендерингом

Question

У меня есть приложение, основанное на React Starter Kit.

На каждой странице есть функция выборки, которая получает данные из API в жизненном цикле componentDidMount.

Сначала я хочу получить данные , а затем визуализируйте страницу с данными и верните ее клиенту.UX в моем случае не имеет значения.

Я знаю, что RSK изоморфен, я готов сменить шаблон или создать свой собственный.Но я не понимаю, как извлекать данные из API перед рендерингом страницы (я имею в виду, как сообщить Express-серверу, какие данные требуются).

Как приложение получает данные сейчас:

example_page.js:

import getBooks from 'queries/getAllBooks';
...
class IdTag extends React.Component {
componentDidMount(){
    this.getBooks();
}

  getBooks() => {
    const request = getBooks();
    request
      .then(...)
  }
}

getAllBooks.js:

import doGet from './doGet';

let result = '';

const request = async () => {
  const reqUrl = '/api/books/';

  result = await doGet(reqUrl);

  return result;
};

export default request;

doGet.js:

const request = async reqUrl => {
  let requestResult = null;

  const doQuery = async () => {
    const response = await fetch(reqUrl, {
      method: 'GET',
    });
    const result = await response.json();
    result.status = response.status;

    return result;
  };

  requestResult = await doQuery();
  return requestResult
}
... 
export default request;

server.js:

...
app.get('/api/*', async (req, res) => {
  const newUrl = config.gate.URL + req.url.replace('/api', '');
  const accessToken = req.cookies.access_token;

  const response = await nodeFetch(newUrl, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  const result = await response.json();

  res.status(response.status);
  res.json(result);
});
...

Answer 1

Если на каждой странице есть вызовы API, то лучше использовать Redx и Redx Saga.Цель Redx Saga - обрабатывать вызовы API.Он будет обрабатывать действия в Q. В тот момент, когда вы вызываете api, используя метод fetch, создайте ниже actioncreators

1) InitialLoading (true) 2) Извлекайте API-создатель вызова API-интерфейса 3) Исходя из успеха, ошибка создает действие-создатель действиясохранить выходные данные метода выборки в хранилище 4) InitialLoading (false)

Answer 2

Вы можете просто установить флаг, когда вы начинаете выборку, и пока она загружается, возвращайте ноль вместо рендеринга.Что-то вроде:

flag = true;
request = getBooks();
request.then(flag = false);

, а затем:

render(){
  if (flag){
    return null;
  } else {
    return this.view;
  }
}