Как сделать Debounce и Throttle в Redux Saga

Опубликовано: 02 Ноябрь 2024
на канале: Веб-разработка - DevMagazine
873
40

#ReduxSaga #Redux #React

В этом видео курса по Redux Saga рассмотрим эффекты debounce и throttle, напишем хэндлеры для чтения значения поля ввода с помощью debounce и throttle, а также напишем кастомную реализацию debounce и throttle с использованием базовых эффектов.

Throttle - не будет стартовать новую задачу в течении заданного времени и будет получать только самые поздние actions. Т.е. будет обрабатываться только одно событие в течение заданного временного окна.
Debounce в отличие от throttle не будет запускаться каждые n миллисекунд. Если пришел еще один action, то предыдущая задача отменится и запустится новая с тем же ожиданием.

Redux Saga это библиотека для Redux и является middleware для Redux, которая призвана упростить и улучшить выполнение сайд-эффектов. Cайд эффекты это асинхронные операции, например, загрузки данных либо иные действия, который должны выполняться помимо изменения данных стора (store).

Это полный курс по Redux Saga, который состоит из 18 подробных практических видео-уроков с исходным кодом (посмотреть все видео курса можно в этом плейлисте https://www.youtube.com/playlist?list....

Мы в соцсетях:
💻 Сайт: https://it-dev-journal.ru
💻 Telegram: https://t.me/devmagazinechannel
💻 Twitter:   / _devmagazine  
💻 GitHub: https://github.com/vadimkorr
☕️ Поддержать канал: https://www.donationalerts.com/r/devm...

Плейлисты и курсы:
📃 Исходный код: https://t.me/devmagazinechannel/105
🍏 Redux Saga:    • 🍏 Redux Saga курс  
💡 Все о ReactJS:    • 📘 ReactJS  
💡 Как пройти ReactJS собеседование:    • 🚀 Собеседование React Frontend  
💡 ReactJS хуки:    • 🐠 React хуки  
💡 Redux:    • ☕️ Redux курс  
💡 Как создать слайдер на ReactJS:    • 🎪 Как создать СЛАЙДЕР на ReactJS  
💡 Svelte:    • 🌴 Svelte курс  
💡 Sass:    • 📔 Sass курс  
💡 GraphQL:    • 💪 GraphQL  
💡 JavaScript:    • 📜 JavaScript  

00:00 - Теория debounce и throttle
00:56 - Примеры использования debounce и throttle в реальных проектах
02:16 - Подготовка проекта
04:47 - Пишем пример с throttle
06:13 - Пишем пример с debounce
07:27 - Пишем свою реализацию throttle
10:58 - Пишем свою реализацию debounce
13:57 - Пишем вторую реализацию debounce

#devmagazine #devmagazinechannel