KZhead

Урок 4. Введение в React Hooks: useReducer

Владилен Минин
2019 ж. 2 Сәу.
46 169 Рет қаралды
Жүктеу

Получить профессию Frontend разработчика -
bit.ly/3If22rB
Подробнее узнать об обучении в Result School -
bit.ly/3HPFrRp
Бесплатный курс HTML & CSS - bit.ly/3TcDcPg
Сделать 5 проектов на JavaScript - bit.ly/3IdeHLG
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vk.com/vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: vk.com/result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
В этом видео вы узнаете про нововведение в React 16.8+, которое называется hooks.
Эта возможность позволяет писать приложения на React используя только функциональный компоненты.
В ролике будет разобран хук useReducer, позволяющий упростить код компонентов и вынести логику в отдельный файл
Ссылка на исходники:
github.com/vladilenm/youtube-...

Пікірлер

  • Владилен, было бы круто увидеть от тебя подробный обзор хуков, которые отвечают за оптимизацию компонентов (useMemo, useCallback и пр). Или просто видео про оптимизацию в React. С твоей подачей материала это было бы бесценно)))

    @fidgetmania@fidgetmania4 жыл бұрын

  • Спасибо за интересную и грамотную подачу материала.

    @user-vf2or4kx6l@user-vf2or4kx6l5 жыл бұрын

    • У вас классная фамилия)

      @VladilenMinin@VladilenMinin5 жыл бұрын

    • @@VladilenMinin Согласен. У Вас не хуже.

      @user-vf2or4kx6l@user-vf2or4kx6l5 жыл бұрын

  • Я по моемук как-то в два действия подключался к редаксу и мне казалось, что это очень круто и быстро вместо всех этих коннект, мап-ту-пропс и т.д. А тут вообще в одну строку! Круто!

    @cybersystem5137@cybersystem51373 жыл бұрын

  • Спасибо за твои работы

    @filippkotenko851@filippkotenko8513 жыл бұрын

  • Спасибо за урок!

    @RewCSharp@RewCSharp4 ай бұрын

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

    @sureyyaxelilova6143@sureyyaxelilova61433 жыл бұрын

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

    @vsevolodpokhvalenko4705@vsevolodpokhvalenko47054 жыл бұрын

  • Очень полезная информация!

    @vladimirww5152@vladimirww51523 жыл бұрын

  • Спасибо за видео, запили пожалуйста об UseMemo

    @user-qm5kv8xx1o@user-qm5kv8xx1o4 жыл бұрын

  • toggle не работает - одну галочку ставит. После обновления страницы можно ещё одну добавлять

    @user-cr2yl7ot8p@user-cr2yl7ot8p3 жыл бұрын

  • А как быть с изменением инпутов? Например, как переделать setName(e.target.value) под редюсер?

    @zachseabass7414@zachseabass74143 жыл бұрын

  • ​@Владилен Минин А как передать состояние useState например из todoListItem.js наверх в app.js? или здесь уже нужен useReducer

    @Antoshkiv1@Antoshkiv14 жыл бұрын

    • храни состояние в app.js и передавай в todoListItem.js, а не наоборот

      @romanilienko2357@romanilienko23574 жыл бұрын

  • Спасибо что создал свой канал, давно надо было это сделать. Есть одно пожелание, пожалуйста, не увлекайся ускорением видео с написанием кода, при объяснении чего то нового такой подход не очень.

    @CorleoneMikele@CorleoneMikele5 жыл бұрын

    • Благодарю за фидбек, учту это. Тут формат роликов был немного иной, в других я буду аккуратней)

      @VladilenMinin@VladilenMinin5 жыл бұрын

    • @@VladilenMinin Поддерживаю просьбу. Есть канал где в принципе все тоже не плохо объясняется, но автор злоупотребляет ускорением видео, что выбивает из колеи, когда ты пишешь код и проговариваешь логику воспринимается гораздо лучше.

      @Polite_person_@Polite_person_4 жыл бұрын

    • но это же не радио или телевизор. можно нажать паузу и посмотреть подробно.

      @romanmed9035@romanmed90353 жыл бұрын

  • Спасибо, отличные уроки 👍 Жаль, нет продолжения про хуки.

    @natali1085@natali10853 жыл бұрын

  • спасибо. Вот бы ещё про localStorage поподробнее..

    @user-ki8ij8xi9c@user-ki8ij8xi9c2 жыл бұрын

  • При таком подходе считается норм, если редюсер - не чистая функция?

    @middleage_crisis@middleage_crisis4 жыл бұрын

  • да только надо еще дописать, для пустого массива const [state, dispatch] = useReducer(reducer, (JSON.parse(localStorage.getItem('todos')) || []))

    @user-eu8yo6hx7n@user-eu8yo6hx7n4 жыл бұрын

    • Вот тут хорошо сказал,а то ошибку выводит =)) все время null да null

      @mikaelgevorgyan4521@mikaelgevorgyan45214 жыл бұрын

    • error у меня голова горела сегодня почему так=))

      @mikaelgevorgyan4521@mikaelgevorgyan45214 жыл бұрын

    • const [state, dispatch] = useReducer(reducer, (JSON.parse(localStorage.getItem('todos')) || JSON.stringify([]))) The cleanest way, without any errors! :))))

      @NazarMalyy@NazarMalyy3 жыл бұрын

    • @@NazarMalyy why do you parse array in first case but stringify in second?

      @evgeny-chugaev@evgeny-chugaev3 жыл бұрын

    • @@mikaelgevorgyan4521 потому что тайпскриптом надо пользоваться и не было бы таких глупых ошибок

      @awenn2015@awenn2015 Жыл бұрын

  • Спасибо. Очень полезное видео. Подскажите, сейчас лучше/популярнее писать на хуках или же как раньше через React.Component?

    @user-tl7vv2bz6p@user-tl7vv2bz6p4 жыл бұрын

    • Сейчас имеет смысл писать на хуках вообще везде, где не требуется точного функционала, типа life cycle hooks или более точечной работы

      @VladilenMinin@VladilenMinin4 жыл бұрын

    • пишу из будущего. Теперь вообще всё на хуках работает... )

      @yakut54@yakut542 жыл бұрын

  • Интересный материал) Спасибо за работу! Целесообразно ли использовать несколько useReduser(один к примеру для отправки формы, другой для работы с WebSocket)? И Context.Provider может быть несколько в проекте? И можно ли в один Context.Provider сразу несколько useReduser?

    @olehzahrebelnyi5996@olehzahrebelnyi59964 жыл бұрын

    • В этом и идея, что их может быть много Посмотри видео на канале про создание приложения на реакт Есть на канале

      @VladilenMinin@VladilenMinin4 жыл бұрын

  • в case 'toggle' лучше сделать вот так: return {...todo,completed:!todo.completed}. Иначе в React.StrictMode не работает переключение из-за двойного рендера(идея не моя)

    @vladyslav4941@vladyslav49413 жыл бұрын

  • спасибо, все коротко и понятно) вопрос: какой должна быть структура большого проекта?! Отдельная папка для компонентов, отдельная для редюсеров?! может запиши видео)))

    @OleksandrPratsovytyi@OleksandrPratsovytyi4 жыл бұрын

    • Согласен, годный вопрос

      @user-jf2ic3up1k@user-jf2ic3up1k3 жыл бұрын

  • ничего не понятно. пролетел

    @stanis_ts@stanis_ts2 жыл бұрын

  • Спасибо за видео ) Жаль у тебя по реакту больше нет видосов.

    @dicoder5978@dicoder59785 жыл бұрын

    • Благодарю за отзыв) Пока делаю акцент на Vue, по React возможно позже будет много практики

      @VladilenMinin@VladilenMinin5 жыл бұрын

    • @@VladilenMinin , ух-т. Это будет просто нереально круто. У тебя здорово получается раскладывать по полочкам )

      @dicoder5978@dicoder59785 жыл бұрын

    • @@dicoder5978 🙏

      @VladilenMinin@VladilenMinin5 жыл бұрын

  • спустя 2 года все пазлы наконец сошлись )

    @yakut54@yakut542 жыл бұрын

  • Спасибо за уроки по хукам, продолжение будет? хотим более advanced техники работы с ними

    @olegdneprovsky2265@olegdneprovsky22654 жыл бұрын

    • Пока не планировал. Есть пример создания своего хука в видео по реакту за 80 минут

      @VladilenMinin@VladilenMinin4 жыл бұрын

  • а почему checkbox нажимается толко один раз? потому что map не триггерит useEffect?

    @AlexanderS2306@AlexanderS23064 жыл бұрын

    • Нашел решение?

      @user-ww1su8or8z@user-ww1su8or8z3 жыл бұрын

  • привет, можно ли юзать useReducer для управления состоянием без useContext ? или редюсер только изменяет состояние, а контекст уже его передает по всему приложению ?

    @user-ns4js5wl5n@user-ns4js5wl5n4 жыл бұрын

    • Конечно можно Все верно

      @VladilenMinin@VladilenMinin4 жыл бұрын

  • Все работает ОК, пока не порпробуешь hosting (напр. на firebase) :react-dom.production.min.js:4408 TypeError: Cannot read property 'map' of null, DevTools failed to parse SourceMap: hooks-todo-3c6f8.firebaseapp.com/jquery.contextMenu.min.js.map DevTools failed to parse SourceMap: hooks-todo-3c6f8.firebaseapp.com/static/js/main.45885405.chunk.js.map

    @user-vf2or4kx6l@user-vf2or4kx6l5 жыл бұрын

  • Получается, что Hooks имеюют полный функционал концепции Redux и последний уже не нужен, раз есть нативный инструмент? Тут и state, и action, reducer, dispatch... все тоже самое или я не прав? Спасибо за ответ.

    @alexua9027@alexua90274 жыл бұрын

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

      @VladilenMinin@VladilenMinin4 жыл бұрын

  • Это получается тот же Redux только удобнее без лишних наворотов, не нужны всякие mapstatetoprops и mapdispatchtoprops.

    @Polite_person_@Polite_person_4 жыл бұрын

  • Привет, а когда будет курс по React Native?

    @user-cy4js3xv7w@user-cy4js3xv7w5 жыл бұрын

    • Привет, пока не знаю точно, ближайшее планирую NodeJS

      @VladilenMinin@VladilenMinin5 жыл бұрын

    • @@VladilenMinin былобы супер по React Native

      @user-cy4js3xv7w@user-cy4js3xv7w5 жыл бұрын

    • @@user-cy4js3xv7w у меня есть в планах, пока деделываю и обновляю старые курсы

      @VladilenMinin@VladilenMinin5 жыл бұрын

    • по native ни одного курса на русском нету. Создай курс на юдеми, куплю.. Ну прям очень надо)

      @GagikHarutyunyan_dev@GagikHarutyunyan_dev4 жыл бұрын

  • Первые 3 хука были объяснены по-лучше. Здесь как-то все очень скомкано. Например мне, как начинаюшему и не очень умному человеку, совершенно не понятен принцип работы reducer.js: откуда там берется state, если в dispatch({...}) мы передаем только 1 параметр, который каким-то чудом потом превращается в action (второй параметр в reducer.js). Это видео было сделано просто для галочки чтоли?

    @user-bx7ly2th3b@user-bx7ly2th3b3 жыл бұрын

    • Разобрался?

      @yakut54@yakut542 жыл бұрын

    • @@yakut54 это год назад было, я уж и не помню, честно ))

      @user-bx7ly2th3b@user-bx7ly2th3b2 жыл бұрын

  • Ссылка на репозиторий в описании битая

    @alex-tac@alex-tac5 жыл бұрын

    • Поправил

      @VladilenMinin@VladilenMinin5 жыл бұрын

  • про самое главное не сказали

    @user-cg1pq2kh6t@user-cg1pq2kh6t4 жыл бұрын

  • Пишите код с нуля

    @MeloGrigorian@MeloGrigorian3 жыл бұрын

  • Курс на 25 минут, а разобрался с ним за 1:20

    @WashYourBack@WashYourBack3 жыл бұрын

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

    @user-rq8fp8fe2k@user-rq8fp8fe2k Жыл бұрын
KZhead