Каковы ограничения на использование Next JS с asyn c Redux Thunks? (Или: как Next JS знает, как ждать asyn c thunks to fini sh?)

Question

У нас есть проект Next JS, в котором мы используем Redux Thunks (написанный с помощью Redux Toolkit ). Это asyn c thunks, которые делают внешние вызовы API, выполняют logi c, et c. Вчера мы поняли, что у нас была одна страница, на которой хранилище Redux работало только тогда, когда страница была вызвана по внутренней ссылке, а не когда страница была перезагружена в браузере или вызвана немедленно. Я написал об этом в Переполнении стека, но понял, что это потому, что несмотря на то, что блоки Redux вызывались правильно, а редукторы хранили данные в хранилище, только часть хранилища работала перенесенный с сервера рендер в браузер.

Это было потому, что - насколько я вижу - я отправлял асин c гром с в асин c thunk

export const fetchArticle = (apolloClient, id: string) => async dispatch => {
  try {
    const result: ICurrentArticleReceivedData = await apolloClient.query({
      query: ARTICLE_QUERY,
      variables: { id }
    });
 /**
 **  'fetchRelatedArticles is another async thunk
 **/
    dispatch(fetchRelatedArticles(apolloClient, id));
    dispatch(currentArticleReceived(result?.data?.Article));
  } catch (error) {
    log(error);
    dispatch(articlesError(error.toString()));
  }
};

Я изменил fetchRelatedArticles отправление, чтобы оно стало просто асин c вызовом, и теперь все это работает.

const fetchRelatedArticles = async (apolloClient, dispatch, id: string) => {
   ...
}

export const fetchArticle = (apolloClient, id: string) => async dispatch => {
   ... 
   await fetchRelatedArticles(apolloClient, dispatch, id);

Я полагаю, что Next JS не знал, что ждать до второго отправка в пределах отправки завершена. Но потом мне стало интересно, как он вообще «знает», как ждать отправки?

Согласно этой статье , когда вы отправляете асин c thunk, dispatch возвращает обещание, которое будет разрешено только тогда, когда завершен переход. Казалось бы, это так, поскольку на наших страницах у нас есть getInitialProps, где мы ожидаем начальных асин c thunk-рассылок.

Index.getInitialProps = async ({ apolloClient, store }) => {
  await store.dispatch(fetchTopics(apolloClient));
  await store.dispatch(fetchArticlesWhere(apolloClient));

но как это работает точно / внутренне? Насколько я понимаю, Dispatch возвращает созданное действие, которое в данном случае является функцией, которая вызывается внутри Redux из-за промежуточного программного обеспечения thunk ... В какой момент обещание возвращается функции, которая вызывает dispatch?

И Далее JS ждет , чтобы отправить хранилище с сервера клиенту, пока не закончится getInitialProps?

Наконец, если я хочу иметь цепочки из asyn c thunk рассылок, все, что мне нужно сделать await каждый 'внутренний' dispatch? Таким образом, в моей вышеупомянутой проблеме я мог бы также решить ее, просто ожидая мою вторую асинхронную c отправку?

  try {
    const result: ICurrentArticleReceivedData = await apolloClient.query({
      query: ARTICLE_QUERY,
      variables: { id }
    });
 /**
 **  'fetchRelatedArticles is another async thunk
 **/
    await dispatch(fetchRelatedArticles(apolloClient, id));
    dispatch(currentArticleReceived(result?.data?.Article));
  } catch (error) {
    log(error);
    dispatch(articlesError(error.toString()));
  }
};

Спасибо за любую информацию!