Redux-Saga React Полный Курс. Урок 1. Саги, Эффекты, Генераторы.

Это первый урок из цикла обучающих видео о Redux-Saga на русском.
Redux-Saga - это middleware для redux, цель которой - сделать асинхронные операции в React приложениях: эффективными для выполнения, легко управляемыми и тестируемыми.
Ключевая концепция редакс саги - это создать отдельный поток в нашем приложении, который несет полную ответственность за все побочные эффекты.
👉 Менторство, обратная связь и поддержка / wisejs
Для полного понимания нужно смотреть видео полностью.
Таймкоды:
00:00 - Концепт и шаблон проектирования сага.
00:54 - Генераторы в ES6, function*, yield.
08:00 - Разворачиваем react приложение и устанавливаем redux-saga.
09:55 - Подключаем sagaMiddleware и создаем redux store.
15:00 - Создаем первые саги. Saga watcher, saga worker, effects.
17:22 - Effect take.
20:59 - Effect takeEvery, takeLatest, takeLeading, работа с промисами.
23:35 - Реальный запрос на сервер через fetch.
26:33 - Effect put.
28:17 - Effect call.
29:43 - Паралельные задачи redux-saga..
32:54 - Effect fork.
34:38 - fork vs call. Разница между эффектами.
38:04 - Обработка ошибок в разветвленных задачах (вызваных с fork).
39:22 - Effect spawn. fork vs spawn.
41:26 - Effect join.
43:25 - Effect select.
44:40 - Резюмируем концепцию и эффекты Redux-Saga.
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка)
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
kzread.info/dron/Oxq.html...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#reduxsaga #reactreduxsaga #reduxsagaeffects #редакссага #реактредакссага #редакссаганарусском

Пікірлер: 157

  • @wisejs
    @wisejs3 жыл бұрын

    Поделись своим впечатлением о первом уроке, зашел? Также оставляй свои идеи для будущих роликов:)

  • @Deadricss5

    @Deadricss5

    2 жыл бұрын

    Очень! Спасибо тебе!

  • @romanmed9035

    @romanmed9035

    2 жыл бұрын

    увидев в другом видео обещание выпустить по сагам, попробловал найти в списке но не нашел. а потом случайно увидел в ссылках в конце другого видео.

  • @juliakim1642

    @juliakim1642

    Жыл бұрын

    Спасибо, классный туториал !

  • @user-uu5ub4lh3y
    @user-uu5ub4lh3y3 жыл бұрын

    дай бог тебе здоровья, ты единственный кто сделал курс по саге, по ней вообще мало информации, ждем продолжения

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо! приям мотивация записывать еще!)

  • @user-uu5ub4lh3y

    @user-uu5ub4lh3y

    3 жыл бұрын

    @@wisejs я тебе больше скажу, я искал понятную информацию про метод fork, ни как не мог понять для чего и как его использовать, понимал только что он не блокирующий, посмотрел твоё видео и сразу на примере все стало на свои места, благодарю за столь ценную информацию и на столько понятную, мой тебе совет, раскрой тему саг по полной, потому что нет ни одного нормального видео руководства по сагам, даже на зарубежных источниках, смотреть в документации очень не понятно, не знаю кто там писал её, но явно не для людей писали, в любом случае многие будут тебе благодарны даже при условии, что не будут подписываться и лайкать, потому что аналогов по сагам нет, ты единственный кто решился на это, всего тебе наилучшего и успехов с подписчикам.

  • @wisejs

    @wisejs

    3 жыл бұрын

    @@user-uu5ub4lh3y по той же причине я и затеял этот курс. Дока запутывает, а в существующих видео ничего не объясняют. Пришлось читать source код и разбираться. Спасибо!

  • @user-uu5ub4lh3y

    @user-uu5ub4lh3y

    3 жыл бұрын

    @@wisejs я не знаю будет ли в дальнейших видео такой эффект как all, но он весьма разгружает написанный код, у тебя в rootSaga вотчеры через yield указаны, а сам вотчер чуть выше, для простого примера такой вариант подойдет, а вот когда саг становится много, лишний код только мешает, лично мы используем вот такой синтаксис export function* rootSaga() { yield all([ takeLatest(actionTypes.GET_PRODUCTS_LIST, fetchProductsList), takeLatest(actionTypes.GET_ME, fetchMe), ]); }

  • @wisejs

    @wisejs

    3 жыл бұрын

    @@user-uu5ub4lh3y да, будет в самом начале следующего!

  • @user-is6qx5ms2n
    @user-is6qx5ms2n3 жыл бұрын

    Как раз redux-saga изучаю. Вот это подгон. Я бы даже сказал, не подгон, а ПОДГОНИЩЕ!

  • @wisejs

    @wisejs

    3 жыл бұрын

    Спасибо за поддержку!

  • @yeghishehovhannisyan1315
    @yeghishehovhannisyan13153 жыл бұрын

    Просто СУПЕР, так внятно и просто объяснил. Лучшее объяснение на данный момент во всём русскоязычном ютубе, и может в целом :) Молодец, так держать!

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо за такую высокую оценку, мне супер приятно))

  • @user-cb8nd7yk5u
    @user-cb8nd7yk5u5 ай бұрын

    Спасибо бро за видео урок! Только после этого урока начал понимать что ж такое Redux Saga. Продолжай в том же духе! Хорошо объясняешь

  • @dr.livesey5157
    @dr.livesey5157 Жыл бұрын

    Все еще самый понятный ролик про сагу на ютубе. Спасибо тебе большое!

  • @perseveranse
    @perseveranse2 жыл бұрын

    3 канала в рекомендациях за неделю, и все крутые

  • @user-yk9nj6co9d
    @user-yk9nj6co9d Жыл бұрын

    Спасибо за ролик. Мне понравился урок. Я аж подписался. Смотрел уроки других людей, ничего не понял.

  • @alekseyberezov8020
    @alekseyberezov80202 жыл бұрын

    Спасибо, бро! У тебя самые лучшие гайды!!!

  • @wisejs

    @wisejs

    2 жыл бұрын

    дякую!

  • @antonkornilov9930
    @antonkornilov99302 жыл бұрын

    Чувак ты лучший! Не видел ни одно видео в ютубе где так четко бы объясняли про сагу!

  • @godliestous4658
    @godliestous46582 жыл бұрын

    Просто волшебный урок, все кратко и ясно

  • @user-wt6sd8nw1c
    @user-wt6sd8nw1c2 жыл бұрын

    Отличный урок) спасибо большое :)

  • @hasst9261
    @hasst92612 жыл бұрын

    Спасибо, жду ещё видео :)

  • @denismironov2134
    @denismironov21342 жыл бұрын

    Дружище, как же четко! Спасибо

  • @konstantinvoronin4687
    @konstantinvoronin46872 жыл бұрын

    Классный контент! Спасибо!

  • @taniakedrova
    @taniakedrova2 жыл бұрын

    Классное объяснение!!! Продолжай в том же духе!

  • @Dozortsev
    @Dozortsev2 жыл бұрын

    Спасибо большое за отличное видео по базовым вещам в Redux-Saga!

  • @RomanBedricki
    @RomanBedricki2 жыл бұрын

    Спасибо за урок, именно то, что искал.

  • @user-uz6pu2wv2x
    @user-uz6pu2wv2x2 жыл бұрын

    большое тебе спасибо, круто объясняешь!! продолжай в том же духе!!!

  • @skyhobbit9901
    @skyhobbit99012 жыл бұрын

    Вот теперь я понимаю что такое redux-saga, спасибо большое. А как это использовать надо еще научиться и пересмотреть пару раз данный туториал)

  • @user-wn4hh9zz2n
    @user-wn4hh9zz2n3 жыл бұрын

    Красава! Очень годно) Спасибо и удачи с каналом :)

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо за поддержку, ценю 🤜

  • @dmitryradostev435
    @dmitryradostev4352 жыл бұрын

    Круто, спасибо!

  • @Polite_person_
    @Polite_person_2 жыл бұрын

    Лучшее объяснение что я видел, спасибо!

  • @mikhailreznichenko8035
    @mikhailreznichenko80352 жыл бұрын

    Отличный курс!

  • @kseniapodoksenova188
    @kseniapodoksenova1882 жыл бұрын

    ОГРОМНОЕ спасибо, бонус в карму за именование эпизодов

  • @legoghetto2689
    @legoghetto2689 Жыл бұрын

    Спасибо огромное! Очень круто объясняшь ❤

  • @zatoprosto103
    @zatoprosto1032 жыл бұрын

    Хорошее видео. Спасибо!

  • @Denisqa-ke1xo
    @Denisqa-ke1xo Жыл бұрын

    Ну просто супер! спасибо!

  • @AleksZhukov
    @AleksZhukov2 жыл бұрын

    Хорошо, что есть такое видео. Мне было очень познавательно и полезно посмотреть.

  • @user-mp9xu5fv8f
    @user-mp9xu5fv8f2 жыл бұрын

    Лучший гайд по сагах, продолжай в том же духе !!!!!

  • @av9559
    @av95592 жыл бұрын

    Спасибо! Очень помог с пониманием.

  • @user-ve2ej4uw4z
    @user-ve2ej4uw4z2 жыл бұрын

    Отличный курс, просто и доступно для понимания.

  • @yanarusakova1632
    @yanarusakova1632 Жыл бұрын

    Рада что нашла Ваш канал!! Доходчиво супер! Один из немногих, кого приятно слушать ))

  • @ohhhucc
    @ohhhucc2 жыл бұрын

    вообще бимба! маст хэв для всех начинающих! спасибо за старания!

  • @compampa
    @compampa2 жыл бұрын

    Лучшее объяснение саг которое Я видел) спасибо братец

  • @evgeniybudaev1690
    @evgeniybudaev16903 жыл бұрын

    Шикарное видео! В проекте Saga и теперь стало понятно как это работает. Очень буду ждать новых видео! Подписался на канал не задумываясь)

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо, рад, что ролик оказался полезным)

  • @serhiimaliuha69
    @serhiimaliuha692 жыл бұрын

    круть! наконец разобрался как работают fork и spawn. Спасибо! побежал смотреть следующие Ваши видео по сагам )

  • @user-xe7sp3pr7t
    @user-xe7sp3pr7t3 жыл бұрын

    Замечательный курс! Жду второй урок! Спасибо за труд

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо за фидбек, мне это важно)

  • @indigosay
    @indigosay2 жыл бұрын

    Спасибо, что подписал там где не совсем корректно объяснял. Благодаря надписям понятно всё стало тоже. Спасибо за постобработку в общем, а не просто снял и выложил в интернет.

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за обратную связь! Люди по разному усваивают информацию, потому стараюсь доносить всеми возможными способами :)

  • @user-lj7yk3kl3f
    @user-lj7yk3kl3f2 жыл бұрын

    топчик, сжато и понятно

  • @mercury_2379
    @mercury_23793 жыл бұрын

    Отлично, жду продолжения

  • @wisejs

    @wisejs

    3 жыл бұрын

    будет)

  • @vuldislav8731
    @vuldislav87313 жыл бұрын

    Очень крутой урок! Спасибо🙃

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо и вам)

  • @xoxo2880808
    @xoxo2880808 Жыл бұрын

    Спасибо, понятно объясняешь

  • @dmitrykorovin4356
    @dmitrykorovin43562 жыл бұрын

    жирный лайкос! Попал на проект с сагами, с видео все легло по полочкам)

  • @mcsimusic
    @mcsimusic Жыл бұрын

    Великолепный урок, все очень доступно, понятно и с примерами

  • @olegpavlov4329
    @olegpavlov4329 Жыл бұрын

    Супер.!!!

  • @aleksandryudaiev9673
    @aleksandryudaiev96732 жыл бұрын

    Redux-Saga React спасибо. Очень понятно

  • @kruboy1605
    @kruboy16053 жыл бұрын

    Жду полного курса! Очень круто! Продолжай!

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо!))

  • @xtereone
    @xtereone3 жыл бұрын

    Красава!)

  • @SerhiiNesterov
    @SerhiiNesterov2 жыл бұрын

    Спасибо огромное

  • @bagga_lev
    @bagga_lev2 жыл бұрын

    Премного благодарен за данный материал! Сейчас пишу на react-native с использованием саги, очень хорошо объясняете , стало гораздо понятнее механизм работы =)

  • @Vnikny
    @Vnikny2 жыл бұрын

    Ты крутой! Спасибо за отличное видео!

  • @fanshtorm1735
    @fanshtorm17352 жыл бұрын

    Автор, ты просто Бог!

  • @oleksandrsnitsaruk7183
    @oleksandrsnitsaruk71832 жыл бұрын

    Поставил лайк и подписался, не останавливайся и пили дальше контент🔥 у тебя реально хорошо получается

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо, будет больше 👍

  • @evgeniyorishko
    @evgeniyorishko3 жыл бұрын

    Хорошее видио, спасибо

  • @wisejs

    @wisejs

    3 жыл бұрын

    приятно слышать , спасибо)

  • @user-mb7kp1bl4w
    @user-mb7kp1bl4w2 жыл бұрын

    Отличный урок. Автору большая благодарность

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за коммент!

  • @johnconnor9787
    @johnconnor97872 жыл бұрын

    Отличный видос, спасибо!!!

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за коммент :)

  • @user-ri8jc4sp1h
    @user-ri8jc4sp1h2 жыл бұрын

    отличное интро для саг ! Спасибо.

  • @sengokusky1515
    @sengokusky15152 жыл бұрын

    Краусанчик!

  • @TheMalekula
    @TheMalekula2 жыл бұрын

    блин круто !я возможно даже понял)

  • @sharkman6434
    @sharkman64342 жыл бұрын

    Блестяще !! Попал на проект а там саги без тулкита !! А я привык тулкит и санки и словил затуп. Спасибо тебе огромное, смотрел всех на свете и не понятно, посмотрел это видео и всё пазлы сложились, шикарно то что в начале есть вводное про генераторы, я их не знал и очень оказалось кстати. Дай бог развития каналу и огромное спасибо от души за работу !!!!!

  • @wisejs

    @wisejs

    2 жыл бұрын

    круто, что мой контент стал полезным)спасибо

  • @vyvaida
    @vyvaida2 жыл бұрын

    Thanks!

  • @rmnkot
    @rmnkot3 жыл бұрын

    огонь!!

  • @wisejs

    @wisejs

    3 жыл бұрын

    🔥🔥🔥

  • @a_tikhomiroff
    @a_tikhomiroff Жыл бұрын

    Огромное спасибо автору! По redux-saga очень мало понятных материалов, а русскоязычных вообще почти нет. А тут всё подробно разжёвано и с отличными объяснениями! Буду смотреть курс дальше, после такого прекрасного первого урока просто нельзя этого не сделать :)

  • @c7rsed118
    @c7rsed1182 жыл бұрын

    сколько читал и смотрел про эти генераторы, ничего не понял тут за 5 минут все понял)

  • @wisejs

    @wisejs

    2 жыл бұрын

    Круто! Рад, что видео помогло разобраться

  • @dim3143
    @dim31432 жыл бұрын

    Ты крут чувак)

  • @wisejs

    @wisejs

    2 жыл бұрын

    Стараюсь 💪

  • @dm.hol.3624
    @dm.hol.36242 жыл бұрын

    Хороший видос. Контента джун+ ~ мидл маловато, спасибо за него.

  • @maksbzr5655
    @maksbzr56552 жыл бұрын

    Я понял!!!! ))))

  • @user-xu3bh5bm1m
    @user-xu3bh5bm1m2 жыл бұрын

    Объяснение очень хорошее. Разжевал всю тему очень хорошо. На ютубе сложно найти того кто так подробно подает материал. И главное понятно. А то один товарищ , не буду говорить кто, просто тараторит, путается сам и всех вокруг запутал. Упускает все подробности и у него тысячи фанатов этих его творений, не понятно почему)))

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за поддержку!

  • @miloman1995s
    @miloman1995s2 жыл бұрын

    зашел!

  • @nilsen1879
    @nilsen18793 жыл бұрын

    Замечательно, больше саги!!! Все что ты сказал по поводу ts, архитектуры , жду ! Сейчас разрабатываю проект на сагах. Как бы ты запускал для разных роутов разные саги? Что если у нас есть многоуровневые пути в Роутах? Или просто изначально все фоне запустить, но не все данные нужно сразу получать… Я ломал и ломаю голову как правильно связать саги и роутинг (пока сделал сагу, где достаю все нужные мне данные для всех роутов) И идея в том, что саги за все отвечают, все компоненты глупые и могут только создавать экшены

  • @wisejs

    @wisejs

    3 жыл бұрын

    Я уже записал второе видео, которое выйдет на следующей неделе. И там есть связка с connected-redux-router и другие подходы. Реагируем в саге на ивенты из роутера, и компоненты максимально простые. Как будто по твоему запросу :)

  • @user-is6qx5ms2n

    @user-is6qx5ms2n

    3 жыл бұрын

    @@wisejs так на прошлой неделе и не вышло. Когда таки ждать?

  • @wisejs

    @wisejs

    3 жыл бұрын

    @@user-is6qx5ms2n Завтра в 12:00.

  • @alexeychernov3902
    @alexeychernov39022 жыл бұрын

    Четко, понятно. Спасибо. Fork и Spawn напоминают promise all и allSettled.

  • @avmru
    @avmru2 жыл бұрын

    👍💥

  • @serg-k
    @serg-k Жыл бұрын

    круто, осталось понять как работать с санкой при передаче айдишника

  • @yuraivaniv1816
    @yuraivaniv18163 жыл бұрын

    топ

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо)

  • @user-yr3gb9bh4k
    @user-yr3gb9bh4k2 жыл бұрын

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

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за комментарий, рад что видео помогло!

  • @SemenAlexndrovich
    @SemenAlexndrovich2 жыл бұрын

    Отличный материал. Спасибо! Но есть замечание: Когда описываются эффекты, скажем "takeLeading", то стоит уточнять, что будут блокироваться любые воркеры для конкретного этого(!) экшна, а не любые задачи вообще. В документации, конечно, тоже не совсем однозначно описано, но все же.

  • @fedordostoevskiy4209
    @fedordostoevskiy42093 жыл бұрын

    Superman !

  • @wisejs

    @wisejs

    3 жыл бұрын

    Just a regular programmer :)

  • @fedordostoevskiy4209

    @fedordostoevskiy4209

    3 жыл бұрын

    @@wisejs But only Superman shares his knowledge , спасибо.

  • @Romul3003
    @Romul30032 жыл бұрын

    Опа, знайомий голос) Привіт тобі із турнірки😉 Лайк, підписка, колокольчик і все таке)

  • @wisejs

    @wisejs

    2 жыл бұрын

    і тобі привіт) дякую за підтримку!

  • @romko-romario
    @romko-romario2 жыл бұрын

    Сокровище, а не курс! Не понимаю, почему Ютуб так далеко засунул в поиске лучший курс по Redux Saga. Благодарность автору, лайк и подписка!

  • @yourbadapple
    @yourbadapple2 жыл бұрын

    отличное видео, будет еще лучше, если чуточку внимания будешь уделять орфографии и грамматике, спасибо.

  • @wisejs

    @wisejs

    2 жыл бұрын

    нет предела совершенству)

  • @user-yv4ou3jl8y
    @user-yv4ou3jl8y2 жыл бұрын

    Незавершённые елды, чёт орнул)

  • @wisejs

    @wisejs

    2 жыл бұрын

    😂

  • @wallnut7313
    @wallnut7313 Жыл бұрын

    Подскажите, как передвать аргументы в воркер динамически, а не как показано в видео, где мы planets и people передаем строго.

  • @alexeyilin1527
    @alexeyilin15273 жыл бұрын

    Лойс инста

  • @wisejs

    @wisejs

    3 жыл бұрын

    спасибо))

  • @notsure8175
    @notsure81752 жыл бұрын

    Спасибо. Но без тайпскрипта такое) Обычно именно он боль в жопе, когда речь идёт о новых технологиях (по крайней мере у меня так). Саги еще не юзал, но что-то мне подсказывает, что это не будет исключение Да и слабой аудитории эти саги нафиг не нужны. А тем кому саги нужны, те в связке с тайпскриптом юзают) Может конечно драматизирую, но опыт подсказывает, что оно часто так. С технологией разбираешься быстро, а типизируешь потом путешествуя по всему стэковерфлоу)

  • @user-yu7gm4df3f
    @user-yu7gm4df3f3 жыл бұрын

    а мне вот интересно по поводу актуальности саг . зайдя на репозиторий видно что основные пункты обновлялись 2-3 года назад . что скажит по этому моменту ? потому как вещь довольно объемлющая для изучения .. и стоят ли они того на сегодняшний день ?? какие бы альтернативы отметили ? пс . я не начинал смотреть (пока) , но как тут заметили , хотелось бы увидеть более менее простую , здравую незапутанную незамудрённую интуитивно воспринимаемую архитектуру и организацию файлов папок .. ) ах да ) за всё что делается СПАСИБО !!

  • @wisejs

    @wisejs

    3 жыл бұрын

    ИМХО, для работы со сложной асинхронной логикой ничего лучше нет. Но тащить в каждый проект с простыми CRUD операциями я бы их не стал. Далее будет видео про структуру и организацию кода. Но начинать смотреть советую с этого видео.

  • @ansaganie
    @ansaganie2 жыл бұрын

    redux-saga saga middleware async action redux react

  • @maksymdudyk1718
    @maksymdudyk17183 жыл бұрын

    В видео автор переключает между собой окна браузера и Visual Studio по типу слайдера? Подскажите, кто знает, как ето сделать?

  • @wisejs

    @wisejs

    3 жыл бұрын

    Это просто анимация переключения между окнами в mac os. Типа alt + tab в windows.

  • @helplrewerse2925
    @helplrewerse2925 Жыл бұрын

    Saga вообще используется с RTK?

  • @anastasiyaboiko8862
    @anastasiyaboiko88622 жыл бұрын

    Жаль нет кода на это видео. Если можно хотя б на код пен кидай в следующий раз)

  • @user-mc6ty8zo6y
    @user-mc6ty8zo6y2 жыл бұрын

    Мало подписчиков, увеличу на единичку)

  • @dali5010
    @dali50102 жыл бұрын

    blogadaryu

  • @borodasichevich7653
    @borodasichevich76532 жыл бұрын

    old

  • @user-vv6jx8qg4v
    @user-vv6jx8qg4v2 жыл бұрын

    Первый нормальный материл на эту тему, не то что у Минина.

  • @fanshtorm1735
    @fanshtorm17352 жыл бұрын

    Это наверное единственное видео на ютубе с нулевым количеством дизлайков при ненулевом количестве лайков. НОЛЬ дизлайков! Это вообще законно?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Не думаю что это продлится еще долго) Спасибо большое за комментарии и поддержку!

  • @user-bj8rh7mb9m
    @user-bj8rh7mb9m2 жыл бұрын

    Саги это худшее что было придуманно для работы с асинхронным кодом, сейчас никто в здравом уме не будет начинать новый проект с этим мидлваром. Сагу придумали извращенцы.😂😂😂

Келесі