@tostershmoster

Как правильно сделать редирект после асинхронных действий?

Сейчас navigate срабавает после таймаута, чтобы то что нужно удалить успевало удалиться и не отображалось на главной странице
if (window.confirm('Do you really want to delete article?')) {
  dispatch(fetchRemovePost(id)); // asyncThunk
  dispatch(fetchRemovePostComments(id)); // asyncThunk
  setTimeout(() => {
    navigate('/');
  }, 2000);
}


Но что если время выполнения этих запросов будет медленнее?

Пробую сделать так
const deletePost = new Promise((res, rej) => {
  res(dispatch(fetchRemovePost(id)));
  rej('An error occurred when deleting post');
});

const deletePostComments = new Promise((res, rej) => {
  res(dispatch(fetchRemovePostComments(id)));
  rej('An error occurred when deleting post comments');
});

const deletePromises = Promise.all([deletePost, deletePostComments]);
deletePromises
  .then(([data1, data2]) => {
    console.log(data1, data2); // не выполняется
    navigate('/'); // не выполняется
  })
  .catch((err) => {
    console.log(err);
  });


Статья и комментарии удаляются из базы, но navigate не срабатывает. Почему?

upd:
const deletePost = new Promise((resolve, reject) => {
  dispatch(fetchRemovePost(id))
    .then(() => {
      resolve();
    })
    .catch((err) => {
      reject(err);
    });
});

const deletePostComments = new Promise((resolve, reject) => {
  dispatch(fetchRemovePostComments(id))
    .then(() => {
      resolve();
    })
    .catch((err) => {
      reject(err);
    });
});

const deletePromises = Promise.all([deletePost, deletePostComments]);
console.log(deletePromises); // Promise { <state>: "pending" }
deletePromises
  .then(() => {
    navigate('/'); // не срабатывает
  })
  .catch((err) => {
    console.log(err);
  });


И так тоже navigate не работает. Пост и комменты удаляются. Редиректа нет.
  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы