Redux-Saga React Полный Курс. Урок 2. Эффекты в деталях. Архитектура саг. React Router + Redux Saga.
Вставка
- Опубліковано 3 лип 2024
- Это второй урок из цикла обучающих видео о Redux-Saga на русском.
Первый урок: • Redux-Saga React Полны...
Код c урока: github.com/maks1mp/redux-saga...
Redux-Saga - это middleware для redux, цель которой - сделать асинхронные операции в React приложениях: эффективными для выполнения, легко управляемыми и тестируемыми.
Ключевая концепция редакс саги - это создать отдельный поток в нашем приложении, который несет полную ответственность за все побочные эффекты.
👉 Менторство, обратная связь и поддержка / wisejs
Для полного понимания нужно смотреть видео полностью.
Таймкоды:
00:00 - Начало, что будет рассмотренно в видео
00:31 - Резюмируем первый урок Saga Watcher / Saga Worker / Effects
01:53 - Обзор начального кода приложения уже подключен Redux + Redux-Saga
02:44 - Организация rootSaga в приложении
04:18 - Подключаем саги способ №1 (yield + array + all для вызова)
05:17 - Подключаем саги способ №2 (yield + array + fork + all для вызова)
06:09 - Подключаем саги способ №3 (fork для каждой саги)
06:31 - Почему первые 3 способа могут быть проблемой + способ подключения №4
07:41 - Способ подключения №5 - автоматический рестарт saga
09:30 - Эффект all
10:48 - Асинхронные действия / запросы при входе в приложение
12:40 - Запрос fetch из саги с помощью call
14:27 - Загрузка данных по переходу на страницу + подключение react-router
21:01 - Эффект apply
23:02 - Запрос по переходу на страницу: хороший способ + подключение connected-react-router
32:01 - Запрос по действию пользователя take + call
36:44 - Запрос по действию пользователя take + fork + call
38:06 - takeLatest и его проблема
39:07 - прокачиваем takeLatest для отмены запросов
41:43 - Эффект actionChannel
44:28 - Заключение
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка)
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
ua-cam.com/channels/Oxq.html...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#reduxsaga #reactreduxsaga #reduxsagaeffects #редакссага #реактредакссага #редакссаганарусском
Лучшее, что я видел за последний месяц
Отличное видео! Все доступно и подробно изложено. Спасибо!
Спасибо большое за ценный и в то же время бесплатный и полезный контент!!!
Спасибо большое) Настолько без воды и по делу что даже не верится.
Очень круто, все разложено по полочкам. Спасибо большое за этот курс!
Отличный курс по saga. Всё разжевано и с примерами.
Спасибо, дружище! Продвижения канала, больше подписчиков тебе и добра!!!
Если вдруг кто-то, как и я не хочет использовать прошлые версии библиотек, а юзать react-router 6 версии, то до 23 минуты забейте на history и сделайте с обычным BrowserRouter (без history).
Далее уже, вместо connected-react-router используйте библиотеку redux-first-history. Они очень похожи + на npm хорошая инструкция по запуску, с этим проблем не будет.
Этот коммент нужно в закреп. Реально кучу времени сэкономит.
P.S. А вообще это конечно смех как часто выходят ломающие изменения, пол года прошло - контент фактически в помойку, хотя он и неплох
Добра тебе хороший человек!
вот такой импорт может помочь для тайпскрипта: import { HistoryRouter as Router } from "redux-first-history/rr6"
Очень доходчиво. Огромное спасибо за труд!🙏
Спасибо за курс. Видео в топ!! Redux-Saga React
Очень полезный урок, все понятно и главное без воды. лайк, подписка
Спасибо за коммент!
Спасибо за видео. Ещё не смотрел, но исходники глянул и я понял как реализовать логику слежки за роутами по-другому. Я слишком сложно сделал, а тут все делает библиотека за тебя. Круто !
С отпуска приеду и буду осваивать новый материал!
спасибо за годноту, товарищ!
крутые уроки по саге!
Спасибо бро! Подписался после первой же минуты видео.
Спасибо за комментарий и подписку!
Спасибо за отличное видео, удалось легко погрузиться в суть.
Двойной рендер (проблема двойного запроса) лечит перемещение внутрь
Просто бомба!
очень полезные видео
Спасибо автору топовое видео по Саге))
Спасибо за обратную связь)
Космос,спасибо ! Redux-Saga
Спасибо
Бро у тебя талант, развивай канал
Спасибо огромное за работу, действительно, никто ещё так подробно не освещал тему саг. Очень хотелось бы посмотреть на грамотную типизацию для саг на ts, лично я с этим долго мучился и так и не пришел к какому-то красивому универсальному методу
Спасибо за комментарий! Генераторы вообще не сильно дружат с тайпскриптом. Это известный лимит тайпскрипта. Я покажу пример которым сам пользуюсь.
Комент для продвижения, мега крутой контент.
спасибо🔥🔥🔥
Честно, очень сложно лично мне все это понять
когда разбирал thunk, toolkit было спокойно
тут поплыл
в любом случае, спасибо, объяснения достойные
что печальнее всего, так это то, что взяли на первую работу после долгого самостоятельного обучения
но генераторы и саги убили спокойствие напрочь
Коммент благодарности и поддержки
И снова Superman !
💪
хорошие кейсы по оптимизации
полегче приятель идешь как паравоз ) .. респект !
Спасибо 😉
лайк
good
кайф
Сделай видос по сагах с typescript
Я не пойму почему так мало лайков по отношению к просмотрам. Качественно все рассказывается и разжевывается!
Спасибо за поддержу!
Люди лентяи.
СДЕЛАЙ ВИДЕО ПО WebStorm - optimize imports, всякие фишки итд
Все просто и по полкам.
Саги реально мощная штука!
Спасибо.
P.S. Может, стОит через инсту продвигать свой канал?
Повторював все як у тебе, короче, з react v18 react-router-dom v5 в мене не працював, динамічно не рендерив сторінки, тільки через перезавантаження, сильно не ліз туди розбиратися, що до чого, але знизивши версію реакта до 17 та ще декіла пакетів понизив версію, як в твоєму package.json - все завелось, дякую за класний матеріал
Дякую за підтримку 🤘Якщо розберешся що не так з 18 і 6м роутером - відправляй ПР :)
@@wisejs судячи із коментів в issues в репі connected-react-router, його перестали мейнтейнити github.com/supasate/connected-react-router/issues
Як альтернативу пропонують redux-first-history github.com/salvoravida/redux-first-history
Я його потикав, сетап трохи інший, але все працює так само. І працює з версіями react 18 та react-router-dom 6
Видео очень интересное. Есть правда нюанс на который я убил кучу времени так как я новичок в этом всем. С пятой версией Connected - React - Router код не работает и нужно делать откат на четвертую версию. Ну и быстро все конечно) Мне конечно по барабану на скорость, я на паузах код в IDE переписываю чтоб лучше доходило, тут главное с асинхронностью тему понять. Спасибо большое автору за его труд!!! Как пожелание от новичка - хотелось бы чтоб на мелочи больше внимания уделялось... хотя те кто полез в saga уже не совсем новички)
Спасибо за комментарий! А вы с первого урока смотрите?
@@wisejs Да. Без него было б вообще не понятно. Собираю общую картину как из пазлов. Там кусок, тут кусочек. Есть просто желание профессию сменить. Вот и учусь. Про мелочи - это я так на будущее. Не про это видео.
@@user-xu3bh5bm1m самостоятельно обучаетесь? Как долго уже изучаете front-end?
@@wisejs Получается что самостоятельно. Попытки обучения начались с начала года. Но я долго болел - почти 4 месяца и было не до этого. Начал с питона и уже 3 месяца как переключился на JS, Node, Frontend и пока не углубленно BackEnd на Express и MongoDB.
@@user-xu3bh5bm1m больше Бекендом интересуетесь? Почему с питона на js перешли?
connected-react-router что вместо этого можно использовать?
если использовать apply вместо call, то параметры передаются просто через запятую, а не в массиве [ ] , но в call понятно куда писать аргументы (call([context, func], ...args)), а в случае с apply куда записывать аргументы, 3-им параметром в виде массива ? заранее спасибо ) видео ТОП !)
ошибка при добавлении линка: Could not find router reducer in state tree, it must be mounted under "router"
Использовала вместо connected-react-router используйте библиотеку redux-first-history, как писали в комментах. React 18 + React-router-dom v6 💥
Ни как не мог найти где пофиксить connected react router . Это сообщение просто спасение. Спасибо
не могу понять для чего нам нужен this в call и apply, почему мы не можем сделать yield request.json(), почему нам нужен эффект - только для блокировки?
redux saga redux-saga middleware react saga effects редакс-сага реакт
Ребят если у кого ошибка: Uncaught Could not find router reducer in state tree, it must be mounted under "router", понизьте версию history - `npm install history@4.10.1`
увы, но уже не в 22 году... это не сработает
что делать с react-router-dom v6?
тоже сижу не пойму
всего 3 урока в серии Redux-Saga?
Привет! Чтобы цикл тротлился после неудачи, а то в случае ошибки он постоянно крутит цикл и stack overflow:
Я пробовал так, но не работает:
const retrySagas = sagas.map((saga) => {
return spawn(function* () {
while (true) {
try {
yield call(saga) // Если сага дохнет, то запускается заново
break
} catch (error) {
console.log(error)
yield delay(2000)
}
}
})
})
Этот код как раз и предназначен для бесконечных перезапусков, а по дефолту сага в которой свалилась ошибка больше не сработает (если её никак не хендлить)
36:47 почему нельзя было использовать takeEvery?
Можно. Все сделано в образовательных целях.
можно ли ссылку на 3е видео добавить в описание?
можна. ще можна користуватись плей листами)
@@wisejs извините, но не нашел.
@@wisejs спасибо, нашел.
дякую за ваше відео! Могли б ви показати як організувать redux-saga і web-socket?
Дякую за коментар! Так, буде у майбутніх відео.
у меня были проблемы из-за последний версий, лучше просмотрите версии пакетов в гитхабе
х
connected-react-router не поддерживает react-router@6
так что снизьте до react-router@5
а нет другого выхода?
@@vazgenaleksanyan2929 я не нашла, мб уже альтернативу в доку добавили нормальную
@@user-ei5zw4dn8q жалко, не хотелось поменять роутинг. Наверное можно как то решит эту проблему таким образом. В главном компоненте отслеживать history, с помощью useEffect и дипатчить в редакс. Так вместо много useEffect будет один.
Switch вже не прапрацює замість нього Routes в версії 6+, імпорт Router з react-router якусь діч видає, хоча в кінці він замінений, в документації базовий приклад з BrowserRouter з react-router-dom, чи я щось не так роблю, бо з Router з react-router аплікація падає, потипу цього працює
і в Route необхідно element передавати, старий код на 17:35 актуальний, чи модулі змінились?
Відео зроблено з v5.
Как распараллелить массив запросов fetch? Допустим 100 запросов
В цикле и дождаться Promise.all
@@wisejs я это пытаюсь сделать на уровне saga. создаю масив тасков (каждый таск обернуть fork) и передаю в эффект all, должны вроде все таски выполнится одновременно, а по факту очередь(
Ничего не понятно, файлы поназывал index.js и говорить преходим туда, преходим сюда, углубления вообще нет, просто описываешь шаги, а что и зачем, объяснения ноль
Вы смотрели первый урок?
Надо внимательнее смотреть. Там же всё грамотно по директориям раскидано, по-моему всё очевидно и понятно.
Как по-другому написать call([request, request.json]), есть решение?
Да, можно еще так: apply(request, request.json)