Redux Thunk — можно ли отменить setTimeout

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

Это thunk-сообщение, которое я планировал использовать.

export const startNotification = (message) => {
  return dispatch => {
    setTimeout(() => {dispatch(notificationMessage(message))}, 5000);
  };
};

Я не уверен в подходе к решению этой проблемы. Один метод, о котором я думал, заключался в обновлении моего редуктора для обработки нескольких сообщений, но похоже, что это сделает редуктор слишком сложным. В идеале я хотел бы отменить все существующие тайм-ауты, а затем снова вызвать функцию. Есть ли способ реализовать это или есть лучшая альтернатива тому, чего я хочу достичь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
681
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

setTimeout() возвращает дескриптор, который вы можете отменить с помощью clearTimeout(), так что это один из вариантов.

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

Если вы в конечном итоге используете clearTimeout(), вы можете найти дополнительную информацию об этом на https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout.

На веб-сайте clearTimeout() требуется идентификатор тайм-аута. Итак, если я изменю код на const timer = setTimeout(...);, а затем на clearTimeout(timer), очистит ли это все текущие setTimeouts?

H. Manner 12.07.2019 17:37

Каждый раз, когда вы звоните setTimeout(), вы получаете новый дескриптор. Вызов clearTimeout(timer) отменит только этот единственный экземпляр setTimeout()

Thad Blankenship 12.07.2019 17:39

Спасибо. Я предполагаю, что самым чистым способом было бы иметь дело с сообщениями в редукторе.

H. Manner 12.07.2019 17:45

Без проблем. Это не совсем соответствует вашему варианту использования, но именно так я делал тосты в стороннем проекте. Я показываю несколько тостов за раз, но редуктор обрабатывает несколько тостов. gist.github.com/raddeus/4a37ddae68a89ea0a893dd08f6456ee8

Thad Blankenship 12.07.2019 18:01

Другие вопросы по теме