66 - React JS - урок redux-thunk в деталях (практика)

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Библиотека redux-thunk:
github.com/reduxjs/redux-thunk
Ну что, пора применить теорию на практике. В данном уроке мы применим thunk на практике и на примере страницы пользователей потренируемся применять эту тему. Так же не забудем про промежуточный связуюзий слой thunk-midleware
В качестве упражнения обязательно переведите на thunk остальные запросы самостоятельно. И только после этого смотрите моё следующее видео!)) Не халтурьте. От этого зависит ваш успех!
Летим, самураи ;)
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#thunk #redux #reactjs #практика #примеры #уроки #курс

[@evgeniyzhuk7725]

*вебка падает* Никто: Димыч: О май гад. Живы здоровы все? Топовый чел, и курсы топовые))) Лайк, респект)

[@p.sh.281]

Решил по совету обитателей канала поставить скорость на 1,25 и тут вебка падает, я уж подумал ну нафиг, Димыча гонять с такой скростью рассказывать, вон аж камера упала.

[@Quentinrei]

49.000 просмотров, на следующем уроке 27.000. Много наших здесь полегло

[@user-xu4it3ed7x]

Летит на санках Над компонентой глупой Аякс свободный. _Хайку из цикла "Будни JS самурая"._ (redux-thunk)

[@user-kc2dp3cf7y]

Это прекрасно, прослезилась

[@KANAL_BEZ_STO_Remont_AVTO]

@@user-kc2dp3cf7y как дела)?

[@user-eq7dy4pl3j]

2024 г На сколько я поняла, у модуля redux-thunk нет экспорта по умолчанию, экспорт именованный и заключается в фигурные скобки. У меня получилось так: import {thunk} from “redux-thank”; const thunkMiddleware = thunk; … let store = createStore(reducers, applyMiddleware(thunkMiddleware)); Все работает, спасибо СЕНСЕЙ ))))😊

[@dinaradervel2391]

У меня так сработало: import { thunk as thunkMiddleware } from "redux-thunk";

[@wesmanon]

А зачем эти сложности? Почему не оставить просто import {thunk} from “redux-thank”; let store = createStore(reducers, applyMiddleware(thunk)); Чисто переименовали получается?

[@eeekli]

за 66 уроков уже как будто сроднились ни дня без Димыча спасибо за твой труд redux thunk react курсы

[@boris5164]

Уже писали ранее, но освежим. Как только у вас перестают меняться стили на пагинаторе в Users, для багфиксинга, следует задиспачить setCurrentPage() в мидлвары, а именно: users_reducer.js export const getUsers = (currentPage, pageSize) => { // Thunk Creator return (dispatch) => { dispatch(toggleIsFetching(true)); usersAPI.getUsers(currentPage, pageSize).then(data => { dispatch(setCurrentPage(currentPage));

[@RenatRysbekov]

Ты лучший! но жалко что я этот коммент прочел после того как я сломал мозг и нашел баг, ахахахаха

[@vallevanovvv]

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

[@midnightstar_zoriana]

Спасибо!! уже под конец видео заметила, что не листается, думала, что в onPageChanged проблема.

[@sugoi3082]

Встретились два друга в баре: - Братан, где мне найти топовые курсы с примерами по React, Redux еще и с React-thunk? - У Димыча топовые курсы с примерами по React, Redux еще и с React-thunk! - Это тот топовые курсы с примерами по React, Redux еще и с React-thunk который на канале IT-KAMASUTRA? - Да это тот самый топовые курсы с примерами по React, Redux еще и с React-thunk на канале IT-KAMASUTRA. (привет ютуб бот)

[@sheshko_pavel]

У кого сломалось переключение страниц, смотрите, там Димыч лишнюю строчку случайно удалил в UsersContainer.jsx: должно остаться так onPageChanged = (pageNumber) => { this.props.setCurrentPage(pageNumber); this.props.getUsers(pageNumber, this.props.pageSize); } Спасибо за видео. Thunk, API, Axios, request, refactor

[@user-te9ci1tx4x]

Думаю лучше перенести эту строку в thunkCreator, чтобы все было чисто и аккуратно. dispatch(onChangePageAC(currentPage))

[@leongregoryan9977]

Лучше ее вписать в getUsersThunkCreator: dispatch(setCurrentPage(currentPage));

[@fedyk_a]

Дякую ! Дуже цікаво ! React-thunk - це круто !

[@zucker6166]

кстати, почему-то не особо сложно дались именно санки, после того как послушал теорию в прошлом видео и представил, как эта система работает и погуглив про замыкания, стало понятно, почему пишем то и пишем это. Ты обалденно объясняешь, Димыч!

[@webmax84]

Спасибо за урок! Нашел ошибку, в методе onPageChanged мы вызывали setCurrentPage(pageNumber). А в thunk-creator-е мы этот метод не диспатчим. Так как задача этого метода менять стиль шрифта выбранной страницы на жирный, сейчас этого не происходит.

[@vlad-zf1ev]

и я заметил. а еще мы повторно делаем dispatch(setTotalUsersCount(data.totalCount)); изначально в контейнерной компаненте onPageChanged не вызывал setTotalUsersCount. это было только в componentDidMount()

[@arsshon6842]

@@vlad-zf1ev контейнерная компонента не должна связаться с Api запросом. Если его оставить там, то контейнерная компонента будет заниматься ассинхронным запросом

[@Skif769]

Люди, что ставят дизлайки , у вас нету сердца. Димычь, капец какую важную штуку делает, благодарю за все сенсей. Thunks, Action, React, Redux

[@user-lc7to1yb3m]

ава топ)

[@meadchen5243]

Бывали темы ранее, где я конкретно так подвисала. Но санки что-то так легко зашли, что закрадывается вопрос "А может, я настолько не понимаю, что не понимаю, что не понимаю?")) Но вроде все понятно и логично. Спасибо огромное за замечательные уроки, и особенно за мотивирующие моменты.) thunk, redux, redux-thunk

[@andreislashikov9618]

бомбил на протяжении полутора недель курс - от санок моз потек))) закралась мысль может не мое) денек отдохнул) думаю дай сяду пересмотрю) сижу смотрю все понятно))) как говорил конфуций: "Зае*ался отдохни". Всем кто на пути выдержки и терпения - "Мышление = борьба с непонятным", а в борьбе побеждает тот кто НЕ ЗДАЁТЬСЯ))

[@universe2390]

Димон, роднуля. За время просмотра этого курса, начал относиться к тебе как к другу, иногда даже разговариваю с тобой. Вчера даже ходили гулять, тебе понравилось! Слушай, сам я из Украины но сейчас нахожусь в Турции и почему-то оплата по карте не проходит, телефон на который должна приходить СМС находиться у матери(долгая история почему все именно так. Я почти пять лет как путешествую и карточка была сделана без меня). Но в любом случае я тебе задоначу. Не смотря на то, что когда мы вчера выходили гулять, то платил я.(Ладно шутки в сторону) Ты красавчик , похлопал тебя по спине, обнял, приподнял! Продолжай в том же духе. Ты чесный чувак и греет душу, что такие люди есть)))))

[@TigerUnderMoon]

Я понял для чего нужен React-thunk , спасибо тебе димыч!!! Смотреть коменты после каждого видео уже как привычка, рад что народ такой классный !!!

[@user-sx4nw8ox5o]

20:50 при переключенні сторінок не змінюєтся номер. Додай dispatch(setCurrentPage(pageNumber)); в usersAPI , вмене другий знизу рядок і pageNumber ( тут уважно з послідовнiстю ). export const getUsersThunkCreator = (pageNumber, currentPage, pageSize ) => { return (dispatch) => { dispatch(setIsFetching(true)); usersAPI.getUsers(pageNumber, currentPage, pageSize).then((data) => { dispatch(setUsers(data.items)); dispatch(setTotalUsersCount(data.totalCount)); dispatch(setCurrentPage(pageNumber)); dispatch(setIsFetching(false)); }); }; }; #thunk #react #axios #redux-thunk #js #2022 #24 #2

[@user-cq5qc8lp3c]

Вот эта тема про thunk, thunk creator - даже не представляю где еще об этом можно так узнать если бы не Димыч. Ну просто красавец.

[@perseveranse]

Удивительно, но прошлый урок по теории санок я понял полностью вроде как, конечно, замыкание нужно еще глубже почитать, но вроде все понятно, в стор приходит НЕ экшн, он такой "это шо такое, я вас не звал" и посылает это что то (санку) в миделварю, миделварч запускает эту функцию, функция сначала выплевывает экшнкреэйтр, который залетает снова в стор, стор уже такой " а ну это экшнкреэйтр - в редьюсер его" затем функция ( саночка ) выплевывает очередной экшнкрейэтор после того как получит с сервера ответ и пускает его снова в стор. Вот примерно так я понял из предыдущего урока. Димыч, спасибо за твои курсы, летим на саночках дальше 🚀🚀🚀🚀🚀

[@yevhenfodorov121]

11/06/2022 У кого сломалось переключение страниц, смотрите, там Димыч лишнюю строчку случайно удалил в UsersContainer.jsx: должно остаться так onPageChanged = (pageNumber) => { this.props.setCurrentPage(pageNumber); this.props.getUsers(pageNumber, this.props.pageSize); } Спасибо за видео. Thunk, API, Axios, request, refactor

[@user-yc2qt4ny7m]

Благодарю за подсказку))

[@user-fs4sl5my1o]

Я понял как работает redux-thunk ! Спасибо тебе, Димыч, за такие потрясающие курсы по React. Твой код совершенен, рефакторинг потрясающий ! Сразу виден декларативный подход

[@user-mm3sd3uh6y]

а я не понял, объясни пожалуйста

[@Vlad-sw4zd]

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

[@vseslavr]

Оторвался от реакта, посмотрел о промисах на других каналах и нихрена не понял. Потом подумал, стопэ, у Димыча ведь должны быть видосы о промисах. Да, так и есть. И после просмотра вот этого kzbin.info/www/bejne/Z2HFoYSGa5Voi9k сразу все понял! Димыч, ты просто красавчик! У тебя самый крутой курс на всем ру-ютубе (а может и вообще на всем ютубе). P.S. Хочу от тебя детей =)

[@MrVagula]

Заметил косяк Димыча с удалением this.props.setCurrentPage(pageNumber) в onPageChanged, оставил эту строчку на месте. Сначала не мог понять почему страницы не выделяются жирным. Пришлось поискать ошибку, в итоге проблема решена. Спасибо за урок, двигаем дальше. Ключевые слова: thunk

[@Sergey30838]

тоже самое))мучался малек)спс

[@alik64]

Зафакторил и сделал домашку, сам , довольный как слон 😅 бомбим дальше!🚀🚀🚀 ох уж эти #санки #thunk #react #redux #middleware #реакт

[@user-dc1cr5ny3q]

Димыч, ты мой КУМИР!!! Устал, уже плоховато соображаешь, 12 ночи, но все ровно топишь, пытаешься вбить в наши головешки принцип работы THUNK, низкий тебе поклон за твое рвение, беру пример с тебя!!! Еще раз спасибо!!!

[@ITKAMASUTRA]

Спасибо и пожалуйста!!!! Летим!!!!🚀

[@user-re9vq6mo2y]

Димыч, за курс спасибо большое! У тебя есть ошибочка) getUsers в componentDidMount и onPageChanged выполняют разные dispath. В onPageChanged еще нужно нужно установить текущую страницу (dispatch(setCurrentPage(currentPage))). Все в принципе работает и так, но не меняются стили у кнопки с номером страницы)

[@dariagrebenyuk8203]

Спасибо!))

[@o-w1871]

тоже заметил, а вот решение onChanget = (bullet) => { this.props.getUsers(this.props.currentPage, this.props.pageSize); this.props.setCurrentPage(bullet); }

[@ivanrussui4126]

Спасибо

[@user-gl8vn7ys4t]

Дожил до redux-thunk, раньше и не слышал про эти преобразователи. Вроде понятно все, спасибо Димыч - сенсей

[@AI_about_crypto]

Круто. Сейчас как раз 16 декабря 2021 - санки очень кстати. Thunk - летим дальше

[@user-sw6jv3ot4z]

Все чекала коли взірветься мозок.... але після Вашого пояснення redux-thunk все стало настільки зрозуміле, що код по профайлу, хедеру і юзерах переписала буквально за 10 хвилин! Ви маєте хист до викладання! Чого в мене не було такого вчителя на курсах? :) Я б тоді обрала напрямок реакту, а не ангуляру :)) Але, що саме цікаве - я тепер розумію, де в мене були архітектурні помилки в ангуляровському проекті

[@hennadiipetrov1967]

Спасибо, Димыч, наконец то начал понимать thunk)

[@rahalmamut01]

Очень понятно 🔥 Спасибо за урок по redux-thunk!

[@user-rz9eg1jb6y]

Для ребят которые делают урок в 2024 году, если у вас проблема с установкой версии санки как у Димыча, то нужно сделать git checkout на коммит где уже установлены санки, сделать npm install и откатится назад опять же с помощью гит чекаут.

[@user-dy6ts5lu5h]

Thunk c первого раза зашло! Спасибо

[@fargutvest]

рефакторинг, вынос в api файл кода с вызовами axios, react-thunk, yarn быстрее в несколько потоков, applyMiddleware, обьявление thunk функции в файле редьюсера, перенос загрязняющей бизнес логики из компоненты в санку, импорт санки и использование ее в контейнерной компоненте, передача санки если надо как callback через props в чистую компоненту Димыч все отлично и понятно обьяснил, клево, супер, спасибо! React Redux

[@alira2924]

Урок просто супер!!!

[@igorlakshynskyi5867]

Слышал раньше что есть такая страшная штука как "Thunk" и очень переживал и боялся их... После твоего объяснения, когда ты их переживал :)), зашло как золотая монетка в борделе.

[@alexandrkornienko6595]

все запросы сделал, все крутяк) как всегда топчик!)

[@firstname9795]

очень занимательно, месяц уже на курсе, топ!

[@daniilbondar1316]

Круть, все легко, идем дальше)

[@denistrapeschonok471]

Круто! Выносишь мозг!

[@anastasiyamuzychenko5176]

очень увлекательно!) круто, спасибо!

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@qwekle456]

Круто, понравилось, спасибо!

[@smartbrain4623]

Красавчик! Спасибо за отличный курс redux-thunk🤘

[@egorpobylets6597]

Вот и практика по Redux thunk!!! спасибо!!!!!!

[@daniilukraine3611]

Красавчик , все с первого раза понятно )

[@aliaksandrvasiukhnevich1098]

Димыч спасибо за уроки, бомбим дальше)

[@sergsergey4251]

Спасибо. Бомбим дальше ©

[@__maxsoul643]

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

[@dmitrykirilenko9293]

спасибо все очень даже понятно) посмотрел первый твой пример thunk-ки, остальное сам переделал)

[@user-yo4ix9gu7k]

Димыч красава!!! Спасибо за курс!

[@aleksandrzelenskiy4000]

Все понятно! Thunk поехали как надо. Спасибо!

[@denweb2408]

Спасибо Димыч за Thunk!)

[@kamol8861]

один из лучших выпусков

[@user-wl5ly9dc6r]

Димыч, спасибо тебе огромное за твой труд и старания! Мотивируешь капец как!

[@elenak2528]

очень боялась thunk и оказалось так просто, спасибо за такое хорошее объяснение

[@schurickxxx]

Спасибо, очень доступно, так легко понять эту темы возможно только от тебя, Димыч! Тру, сенсей!

[@user-te2xl5nd4c]

Понятное объяснение thunk! Респект!

[@denisshupenko1370]

вот они какие, redux-thunk! Спасибо, сенсей! летим!

[@saharnya]

Я поняла thunk! Очень круто спасибо👍

[@user-ci4dv5in9i]

Вот мы и дождались redux-thunk!!! Спасибо, очень хороший курс!!!

[@user-pv5is5pz4j]

Спасибо за урок! Я разобралась с темой redux-thunk) лучший курс по react и redux!)

[@developers_gaming]

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

[@tema_skakun]

спасибо, Димыч, летим дальше)) #thunk #redux #reactjs #практика #примеры #уроки #курс

[@karway211]

Лучшие уроки по React & Redux! Спасибо за урок по redux-thunk!

[@user-ig7gc8vi2j]

Redux-thunk, dispatch, redux, applyMiddleware. Всё супер!

[@user-sc8oi5kd7w]

spasibotebe! thunk kruto i dostupno

[@AndreiS-cu2wb]

Спасибо еще за один познавательный урок! React, Redux, Thunk - это круто!))))

[@pashabezk]

2022. Действительно, на практике оказалось проще, чем в теории. Спасибо большое!

[@marsonleonardovich4036]

Ты как всегда на высоте по донесению информации! THUNK вошли в мозг!))

[@eugene-dmitrievich]

Спасибо за урок! Разобрался с redux-thunk и thunk

[@g3rasim1]

Большое спасибо за курс!)

[@user-sm2fh6ms8o]

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

[@esken97]

Все получилось Димыч, после практики и теория стала понятна, бомбим дальше)

[@visokogroup7922]

С первого раза зашло! Thunk значительно упростил жизнь оставив всю логику за пределами интерфейса!

[@llelya]

Самый крутой курс во вселенной!!! ♥️♥️♥️🔥🔥🔥

[@user-ud9dc5vt7e]

афигенные уроки, 40 минут и знаешь санки! лучший!

[@artemtarasenko3059]

Круто, пересматриваю сотый выпуск каждые 5 занятий и ты говоришь в нем про React-thunk, очень ждал эту тему) Спасибо, Димыч, очень крутой выпуск)

[@sashaya6114]

Димыч, спасибо за redux-thunk, как всегда крутой урок=)

[@maxfox4615]

Thunk это круто ! Спасибо за урок !

[@ole_oli]

Спасибо Димычь! react, redux-thunk- продолжаем расти. Супер уроки.

[@user-tf1rn7qq2p]

Большое реактивное спасибо, Димыч! react-thunk, UI, BLL, DAL

[@wild_wizards]

Лайк! Тема хорошая, с Auth, Header, Profile все получилось. Едем дальше!

[@aidosbatyrkulov3272]

I'm so happy that i could understand react thunks at one watching

[@Dozortsev]

Димыч, спасибо! Понял с первого раза. Пойду внедрять redux thunk(и)

[@egorn6543]

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

[@user-dc5yl7zy5w]

Thunk - это круто! Спасибо большое за понятную информацию!

[@vladpobidash]

Спасибо, я понял что такое thunk в React и теперь готов применять это мощнейшую концепцию на практике! Спасибо, Димыч!

[@user-pl9bm6pv8z]

ты такой позитивный, и поэтому всё доходит!!!!Thanks

[@lesyadorosh1805]

Спасибо за урок! Я разобралась с темой redux-thunk! Лучший курс по react и redux!)

[@Alex-bn7zr]

Лучшие уроки по React and Redux !!!

[@MaximM999]

все очень даже понятно! После 1 урока теории, мало что понял, но после практики все стало ясно! Спасибо Димыч!

[@user-qh7fr3cf9c]

Лучший! Нет слов, одни эмоции) 2022, летим дальше! react thunk redux-thunk

[@kitsune_424]

Это было очень круто! Поняла этот видос с первого раза, только потому что смотрела сотый выпуск больше 20 раз, а там ты очень хорошо раскрываешь тему санок!!СПАСИБО!!!!

[@artemtsvelov752]

Благодарю мужчина! Максимально разжевано и доступно. Лучшие уроки по redux-thunk !!!

[@oleksandrsanter4540]

Oчень крутое объяснение, спасибо Димич!) санки практика , thunk create redux react

[@user-br1tu9xh4w]

Спасибо, Димыч!!! Немного пока плаваю, но в целом понятно. Тема, конечно, вынос мозга.

[@user-qc1cn4dl8q]

Redux-thunk круто, понятно, доступно. Спасибо, Дима.

[@IrynaPechenitsya]

Очень круто!!! Я уже забыла с чего мы начинали)))) Димыч супер!!!