response-redux ssr asyn c вызов api не работает должным образом - PullRequest
Новая
       27

response-redux ssr asyn c вызов api не работает должным образом

0 голосов
/ 05 мая 2020

Я пытаюсь реализовать рендеринг на стороне сервера для моего приложения React. Я использую redux, thunk также.

, когда я пытаюсь отправить действие для вызова API для этой страницы. Я хочу дождаться вызова api для fini sh, а затем отобразить html на сервере и отправить его. Но мое обещание было выполнено до того, как я получу ответ от api.

Вот мой код. 

const promises = [];
  routes.map(({ route, match }) => {
    if (route && route.loadData) {
      const loadRes = route.loadData(store, match);
      console.log('l', loadRes);
      promises.push(loadRes);
    }
  });

  Promise.all(promises)
    .catch(() => promises)
    .then(() => {
      console.log('caall');
      render(req, res, store);
    });

мои маршруты 

export default [
  {
    path: '/',
    component: Home,
    exact: true,
    loadData: (dispatch) => dispatch(getNews(0)),
  },
  {
    path: '/:pageNumber/page',
    component: Home,
    loadData: (store, match) => {
      return [store.dispatch(getNews(match.params.pageNumber))];
    },
  },
];

это мое действие 

export const getNews = (page) => async (dispatch) => {
  const response = await axios.get(
    `http://hn.algolia.com/api/v1/search?page=${page || 0}`
  );
  const res = await getHits(response.data);
  console.log('hit', res.length);

  dispatch({ type: 'UpdateNews', payload: res });
};

Не знаю, где я делаю не так. Я отвечу после того, как визуализирую html.

1 Ответ

0 голосов
/ 05 мая 2020
  1. Ваша функция loadData в маршруте /:pageNumber/page возвращает массив обещаний вместо обещания. Поэтому, когда вы передаете вложенный массив в функцию Promise.all(), он разрешается мгновенно.
  2. У вас неверная подпись функции loadData в маршруте /, потому что вы передаете store в качестве первого аргумента, а не отправку.

Тем не менее, вам следует изменить код маршрутов следующим образом: 

export default [
  {
    path: '/',
    component: Home,
    exact: true,
    loadData: ({ dispatch }) => dispatch(getNews(0)),
  },
  {
    path: '/:pageNumber/page',
    component: Home,
    loadData: (store, match) => {
      return store.dispatch(getNews(match.params.pageNumber));
    },
  },
];
...