#13: 🍕 React Pizza v2 - Изучаем хуки useSelector, useDispatch, создаем свой Slice в Redux Toolkit

React Pizza V2 - Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.
Более подробней тут: www.notion.so/...
Исходники доступны в Boosty или в моём Telegram-канале: t.me/archakov_im
❤️ Поддержка:
- Boosty (исходники, макеты): boosty.to/arch...
- Донаты: www.donational...
Старый курс React Pizza - • #1: React Pizza - разр...
👀 Демо: react-pizza-v2...
📝 Полный стек:
- ReactJS 18
- TypeScript
- Redux Toolkit (хранение данных / пицц)
- React Router v6 (навигация)
- Axios + Fetch (отправка запроса на бэкенд)
- React Hooks (хуки)
- Prettier (форматирование кода)
- CSS-Modules / SCSS (стилизация)
- React Content Loader (скелетон)
- React Pagination (пагинация)
- Lodash.Debounce
- Code Splitting, React Loadable, useWhyDidYouUpdate
Ссылка на исходник: github.com/Arc...
Ссылка на вёрстку: github.com/Arc...
Ссылка на дизайн: www.figma.com/...
Таймкоды: еще не готовы
📢 Платный курс по ReactJS с наставником: mentor.archako...
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archako...
- Личном блоге: archakov.im
- GitHub: github.com/Arc...
- Моё резюме: career.habr.co...

[@iamboikodmytro]

Деструктуризация в конце всех нужных значений из redux просто маст-хев!) Спасибо, как-то и не сообразил сразу!)

[@dennyaap]

Из всех роликов что я видел этот помог мне понять redux toolkit сразу же. Другие каналы в основном просто копировали код с оф.сайта и такие: 'Вот сюда вставляем это, а сюда это'. А зачем, что почему куда не объясняли... Тут материал более чем даже доступен для понимания. Спасибо! Можете пожалуйста записать ролик про redux toolkit на TS?

[@dev-kj7on]

какой же редакс тулкит крутой после обычного редакса! спасибо за крутые видосы, отлично объясняешь!😌

[@BekzatTulebaev]

Дэннис спасибо большое тебе за твои уроки, сначала смотрел первую версию react-pizza, где было трудно понять redux, но этот курс просто БОМБА!!!!! То как ты объясняешь все предельно ясно и не только redux, ну так могут не все. И + твои мотивирующие монологи тоже кстати помогают 😃

[@artman9592]

Коммент благодарности && пожеланий && для количества )))) - Чётко, спасибо !!! - Ещё бы createselector (живой поиск без перещёта селекторов где входящие параметры для фильтров не изменились) и авторизацию (приват роуты) хотябы простенькую без рефрэш токена... и обработку ошибок

[@Maksym_Kozlov]

Поддерживаю, очень не хватает этого

[@YevhenHromov]

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

[@apollon8179]

Я сильный человек... Но на Редаксе я заплакал

[@dmitryklyuev616]

попробкй storybook. вот там будет водопад слез((((

[@jacktwinn]

Не знаю, я плакал когда он вёрстку исправлял)) от редакс-тулкит я прям радуюсь после самого редакса)

[@FilmsMediaTV]

а я плачу каждый раз когда Денис дает название переменным и потом их переименовывает ))

[@SmashLincer]

@@FilmsMediaTV в vsc можно F2 нажать и все переменные переименуются)

[@OlgaLebedeva-o3q]

Объяснение шикарное, как и в предыдущих уроках, но материал совсем новый и незнакомый. Сложно понять. Буду пересматривать раза 3. Спасибо за труд!

[@nikolayg.5319]

Отвал башки, спасибо за курс!

[@МарияТроянова-г1и]

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

[@CyberGenius777]

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

[@sasdasaasdasdasdadad5354]

а export default писать ? лучше через export просто

[@kostyafrompiter]

Export default не юзай лучше, поищи в интернете тему эту

[@makardovgopoly5286]

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

[@mikeempire]

Блин, весёлый ты мужик! Спасибо за этот курс, прям интересно смотреть твои уроки!

[@АлександрСамсонов-й9э]

Спасибо, дружище 💪

[@Phoenix_coding]

Лучшее что есть на ютубе

[@yakub8798]

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

[@dotg6618]

лучший, ты лучший учитель из всех кого встречал

[@zakiro4277]

58:31 const { categoryId, sortType } = useSelector((state) => ({ categoryId: state.filter.categoryId, sortType: state.filter.sort.sortProperty }))

[@StrikerFeed]

const { categoryId, sort: { sortProperty } } = useSelector((state) => state.filter)

[@tatianaagapkina8658]

Классный урок! первый раз попробовала RTK сейчас. После обычного редакса настолько легко, что ждешь подвох)))

[@kusov-max]

переделываю первую пиццу под Toolkit, сначала не чего не понял (почему так и так, где экшены и тд) а потом как понял аж в шоке от того как все стало проще😁

[@YulVilaya]

наконец - то пост закончился и ваши уроки стало легче смотреть , мучалась прям

[@crypto4elik]

без воды и еды конечн мозг будет подтупливать) ща на каком уроке вы?

[@YulVilaya]

@@crypto4elik я на 15 не могу разобраться, дошла до 17 и буду заново смотреть наверное с 13 урока, не могу понять как сделать fetchPizza функцию

[@crypto4elik]

@@YulVilaya я тоже на 15, как рал начал

[@YulVilaya]

@@crypto4elik а как попасть в ваш чат где все обсуждают реакт пиццу?

[@YulVilaya]

@@crypto4elik не вижу тг , напишите ник

[@DanRotaru-1]

Добавьте все видео из этого курса в плейлист пожалуйста, там только 3, не очень удобно перейти на следующий урок

[@ЛюбчикШолоп]

00:00 - начало 00:26 - делаем filterSlice 13:02 - добавляем его в store 13:55 - добавляем логику redux в Home 40:05 - полезные расширения для Chome (отслеживать изменения redux, отслеживать ререндеринг) 46:51 - добавляем redux в Sort 59:55 - окончание

[@Marylovesautumn]

спасибо дружок

[@РыжийПыжий-т9ъ]

или спустя десятки часов копания в RTK я начал что то понимать или вы и вправду все отлично объясняете, а в принципе возможно и то и то) спасибо за урок

[@kanyshaiosmonova2008]

Немного поняла, не очень сильно. Но понятие уже есть. Спасибо тебе Денис!

[@helloglobalme9689]

Начал с нуля. Закончил этот урок. В принципе, ничего прям сложного не вижу. Все логически понятно. Единственное, после завершения курса, планирую уже что-то свое написать, как раз практика поможет закрепить синтаксис и новые знания.

[@OleksiiYurchenko]

11:00 - как я понимаю это не экшенс, это экшн криэйторы промапаные на ту часть логики редьюсера, которая отвечает за обработку текущего экшена. Именно поэтому, как по мне, написание setCategoryId: (state,action) => {} более логичное, ну и название самого объекта это все таки редьюсер а не экшены, просто логика редьюсера имеет такое удобное представление. Экшн это простой объект, экшн криейтор - функция которая возвращает экшн, она принимает в себя пейлоад но никак ни state и action. State и action принимает в классическом редаксе как раз редьюсер, так что в этом плане опять же таки все верно. Спасибо за контент, смотреть очень интересно, и тулкит действительно очень продвинулся и позволяет очень многое!

[@HUNTERM7]

Через боль, уныние и полную ДЕСТРУКТУРИЗАЦИЮ мозга я пытаюсь понять redux... Вроде что-то получается, спасибо)

[@АртурАнтисептик]

Когда кс? Уже год жду

[@matvienko_p]

@@АртурАнтисептик Hunter бросил кс и делает во фронтенде всякое

[@Oleg_Artemov]

Огромное спасибо за твои подробные объяснения !

[@matveyd7272]

53:33 Я упустил тут, что нужно в dispatch(setSort()) в сам сетСорт передать obj При клике на тип сортировки всё ломалось и по ошибке я так и не смог установить в чём же проблема. Пришло раза три пересматривать видео и заметил, что упустил эту передачу. Тем, кто читает комменты перед просмотром - будьте внимательны на этом моменте.

[@grigodoes]

Качественный материал, спасибо) 1:01:10 - "поделиться с менеджером или человеком", те менеджер не человек, да?😂

[@GabrialWeb]

Очень круто все изложил! Спасибо большое!

[@rbyerbye54]

Ахеренный курс, респект тебе за старание!!!!

[@Евгений-х7п9с]

Уже сложнее становится но более менее понятно. Спасибо

[@Jest_Zloi_Voli]

redux-toolkit огонь спасибо тебе друг!!!

[@dmaberlin]

супер объяснение!!!

[@theoty-js]

25 кадром реклама мегафона )

[@blackmetalterr88r94]

очень ждем следующее видео

[@tastebublik]

как всегда с кайфиком

[@fly1594]

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

[@plastmacc8489]

со 2 попытки вышло сделать. Подглядывал по минимуму

[@StarkElessar]

Я сортировку реализовал таким объектом: sort: { name: "популярности", tag: "popular", type: "desc" }

[@UchimVmeste.]

Консоль логи иногда больше путают чем помогают. Лучше не показывать варианты разные , как и что могло быть если бы и т д. А просто показать четко что к чему.

[@ВячеславГудков-н5е]

Отличные уроки

[@mak_whisk]

Спасибо

[@НиколайБалабанов-ц6п]

Вот так долго продавался нам редакс, что не будет лишних перерендеров, но на самом деле они есть. +- столько же. Home и sort друг друга аффектят на перерендер

[@НиколайБалабанов-ц6п]

С другой стороны, если мы вынесем логику отправки запроса на получение пицц в экшн креаторы, то у нас в компоненте home, не будет sortType и будет меньше перерендеров из-за изменения "чужого стейта"

[@rasvom]

после того как я добавил filter в редюсер, я оказывается не сохранил файл, тупо убил столько времени пытаясь понять в чем проблема, в итоге понял те моменты которые были непонятны

[@likluklak]

1:38 да все мы поняли из прошлого урока :)

[@finger_colors]

как называется расширение которое показывает подробности при наведении на код?

[@Denis-ws1vn]

Щас бы еще один видосик)

[@ПавелЖуравков-щ5п]

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

[@swegewe3754]

Подскажите кто нибудь почему может выдавать такую ошибку ? could not find react-redux context value; please ensure the component is wrapped in a | | | Если кто то столкнётся с этим то надо обернуть

[@host9580]

Делал через axios и теперь, когда добавил redux все перестало правильно работать, в чем проблема не пойму)

[@alexandr8151]

с твоими объяснениями редакс оказался не таким уж и сложным боссом))

[@kenny2481]

Home.jsx:24 Uncaught TypeError: Cannot read properties of undefined (reading 'categoryId') подскажите пожалуйста что делать с этой ошибкой, весь измучился

[@en_kratia]

А если для FIlter и Sort создавать независимые состояния, а не одно совместное, то это будет хуже?

[@powerjavascriptman]

Я не понимаю почему 3 раза рендер идет: console.log в Home у категорий и у сорта, хотя мы всю логику в редаксе реализовали. По сути в этом заключается один из смыслов редакса, оптимизировать... Пожалуйста объясните почему 3 раза идет консоль.лог при клике на фильтр или сорт?????

[@ibrohimahatkulov8111]

Gde typescript ???????

[@holovkevych]

pozzhe !!!! )))

[@maga_frank]

22:41 чет у меня при нажатии на категории выходит ошибка о том что onChangeCategory not a function. Написал все точь в точь не пойму в чем дело.. Разобрался, нвдо было в компоненте Categories в пропсе указать правильное название т.е onChangeCategory

[@SmashLincer]

Привет! А почему при изменении категории у тебя компонент перерендерился 3 раза?

[@kenanhaciyev3759]

klassssss

[@kitsunaana9783]

Пока проходил курс заметил, что если пройтись по всем категориям, то есть "Мясные, Вегетарианские, Гриль, Острые, Закрытые", то можно насчитать всего 8 пицц, а у нас их 10, ибо 2 пиццы имеют "category": 0

[@mikeempire]

Дак мы это пофиксили на предыдущих уроках

[@sweet_donut_]

👍

[@MrTandem31]

Сколько нужно времени чтобы освоить реакт с нуля,и пилить подобные проекты c javascript знаком на базовом уровне , ну и в последующием конечно же работать frontend разработчиком? Твой ресурс очень неплох как мне думается для старта

[@ИгорьНово]

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

[@kostal1979]

Логика очень сильно похожа на useReducer

[@yaromahob]

R A H M A [T]

[@AchtungBaby_87]

тень на плетень( не понял вообще

[@АлександрСосо-щ1б]

как по мне, ничего этот toolkit не упрощает. какой в нем смысл...

[@ArchakovBlog]

Редакс это не про упрощение. Если сравнить тулкит с обычным, то он более лаконичней

[@АлександрСосо-щ1б]

@@ArchakovBlog я имел в виду redux-toolkit в сравнении с обычным редаксом. но я выразил свое мнение, а там кому как удобнее...

[@hryashq]

В Тулките не приходиться создавать переменные, чтобы стор задиспатчил экшон в нужном месте. ЭкшнКриейтор автоматом засовывает type в объект, беря поле name из слайса. Это уже убирает половину кода из редюсера в старом редаксе. Да и сама концепция слайсов очень удобная.

[@TheSky5028]

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

[@mariamarsenyan5072]

Почему выдает ошибку : “Cannot read properties of undefined (reading “replace”)” ?? const sortBy=sortType.replace(“_”, “”)

[@Человек-р9ц]

Ребята, будьте бдительны: на 13:17 импортируйте filterSlice без деструктуризации (т.е. без ковычек - {filterSlice}), иначе сайт поляжет так, что не поднимите, а в консоли не разберетесь. я опечатался, потом пол дня искал)))

[@0821zeus]

Шел 2022 год, люди руками импортируют)

[@ИсмаилБеков-р6ц]

@@0821zeus Автоматически он только через раз импортирует... Или появились более современные плагины для решения этой проблемы? Интересно...)

[@vityaost]

@@ИсмаилБеков-р6ц вебшторм)

[@salovbokah]

@@ИсмаилБеков-р6ц path intellisence?

[@Андрей-д3й7ъ]

@@ИсмаилБеков-р6ц Ставишь курсор в конец, нажимаешь Ctrl+Пробел и он тебе предлагает импорты (Это для VSCode)

[@andriibeha3850]

Уроки дуже цікаві і пізнавальні. Моментами сміюсь від душі (крутий чувак продовжуй!)

[@JavaScriptcher]

Redux мощен, но пока нихрена не понятен!!

[@unclechernomor4421]

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

[@noxplitbeats1262]

Спасибо огромное за урок! Разжевано просто до мелочей, очень понятно и доходчиво! Благодарю от души и оказалось вовсе не сложно))

[@alexeyfilippov42]

сохрани пожалуйста новые видео в плейлист. я завтра хочу выкачать с ютуба этот курс

[@ustell3872]

Спасибо за урок! Но такой вопрос будет ли сегодня пагинация на redux'e?

[@crypto4elik]

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

[@Человек-р9ц]

Сильный урок, пересмотрел дважды!))

[@Kurkulio_]

46:52 - сортировка 56:28 - два useSelector в одного

[@JdIm6fhjLgdWRhn]

50:00

[@YulVilaya]

подскажите, а используется ли сейчас в проектах хук useReduser()? очень похож редакс на него, тогда что - то одно использовать нужно?

[@Ve-Dono]

Кайф. Redux понял быстро и фактически с первого раза на начальном уровне, делал перерывы на потыкать, но каких-то моментов когда пересматривал куски не было. Делал как понимал, а потом фиксил, дополнял или оставлял как сам сделал исходя из видоса. Но, сделал все и пошел смотреть видос, пару моментов фиксанул по факту и самый шик это вытягивание через useSelector в одну строку, как бы вроде логично, но я не додумался. Thx)

[@ИсламМурадов-ж8к]

Наконец то начал понимать

[@finikkkk]

я посмотрел redux в react-pizza-v1 там было много непонятного и я чисто повторял каждую строку, теперь познакомившись с redux-toolkit я даже сам сделал рабочий filtersSlice и при этом все понял (то есть со второго моего знакомства с redux). Cам в афиге какой я умный и как быстро учусь(еще я скромный)😀 Теперь могу сказать, что у меня был хороший учитель

[@ГеннадийГорохов-ц8н]

Отличный курс про Реакт Редакс спасибо. С удовольствием смотрю!!!

[@mishatsigamenko8093]

Привет, объясни пожалуйста почему ты в категориях прокидываешь пропсы допустим, а в сортировке решил перенести логику ? p.s может тупой вопрос , но я че-то не понял

[@RamaRama-qv3jo]

Арчаков ты просто лучший!!! Все так разжевал и по полочкам разложил)

[@СергейСомов-м8ы]

как же все запутанно часа 4 смотр и не могу понять почему у меня не работают категории, и думаю, а может наставничество купить(нет)

[@matveyd7272]

Почему-то Redux devtools в хроме не отображает ни стейт ни экшнс (там, где у Арчакова в tree написано filter: {category : 0} у меня (pin):undefined

[@webhawky7841]

у меня тоже такая проблемка была, это глюк девтулзов

[@jenek051]

Да, кайф урок 🙌 #redux, #react-redax

[@clojure_sith]

Я знаю ̶к̶у̶н̶г̶-̶ф̶у̶ Redux

[@СергейМищериков-щ6б]

Очень подробно. Спасибо)👍

[@vinograd3353]

Арчаков, привет, а почему ты именно в home сделал логику по клику переключению categoryId, a sortType ты решил сделать в самом компоненте Sort? Это лучше сказывается на ререндере страницы? Как по мне, легче было вынести уже всю логику по переключению в home

[@ArchakovBlog]

Я решил внутри Sort сделать. В целом, это не влияет на что-то и можно спокойно сделать так, как и ты сказал

[@vinograd3353]

@@ArchakovBlog понял, спасибо за твой труд и контент!!!

[@holovkevych]

в первой версии вроде так было, как ты предложил

[@MenuMoscow]

13 unit start

[@valerasho5874]

Большое спасибо

[@shokhrookhr3850]

Круть

[@elmirweb6583]

Летим!

[@RuslanDasaev-f7f]

Ребят, скиньте пожалуйста готовый код первых 10 уроков, я работаю и нет возможности проходить весь курс (

[@centralcat3325]

а мы не работаем, брат