75 - React JS - redux-form введение (login)

🚀Стань квалифицированным разработчиком за 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-form. Что она делает?
Предоставляет нам специальынй reducer, который мы должны закомбайнить в общий наш стор. И с помощью этого редьюсера redux-form за кадром будет делать всю магию flux-круговорота, а так же предоставлять много возможностей по валидации!!! Начнём с самой популярной формочки - страницы авторизации - Login Page
redux-form.com/8.2.2/
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#reduxForm #практика #примеры #уроки #курс

[@AlhikPRO]

Внимание, сейчас Redux Form уже не используется, вот что пишут разработчики "Attention: Do not begin a project with Redux Form. The author of Redux Form has written a superior library, React Final Form."

[@user-vl9te1cg3r]

Formik в помощь

[@dmitrylebedev2691]

@@user-vl9te1cg3r react-hook-form топ

[@mrs.doubtfire8197]

и как быть?

[@user-vl9te1cg3r]

@@mrs.doubtfire8197 я на formik перешёл. Тем более, что Димыч во второй части тоже на него переходит в одной из серий.

[@mrs.doubtfire8197]

@@user-vl9te1cg3r вторая часть эта та, что от 100 выпусков и выше?

[@uzurbatya]

Пацаны, на 2:50 в комнате Димыча начинается полтергейст с дверной ручкой. Лучше б я так внимательно в код смотрел

[@RenatGrishin]

и на 25:08

[@maxpayne6219]

ахахаха

[@lmbrjk22ak81]

и на 8:55

[@user-xj8io9rl7g]

))))))

[@petrameltchenko8825]

74 выпуска ставили четкого пацана debugger, а теперь это грязная практика!

[@DmitryJT50]

пацан зашкварился и стал нечетким))

[@n0escape]

Такс, народ, говорю снова от лица обывателя. Если у вас есть время рассмотрите библиотеку Formik, однако если вы не уверены в своих силах, или нет времени и хочется бомбить дальше - не обращаейте внимание на комменты из этого видео, устанавливайте redux-form и бомбите дальше курс, все работает без проблем. Со временем в 2.0 Димыч покажет как пользоваться и как установить Formik в 13 уроке.

[@ivansamoiliuk5451]

Здорово, Дима! Не сдавайся! Фигачь! Ты нас всех подстегиваешь и подбадриваешь. 75-й урок... С другим ментором я бы уже сдулся давно! Благодаря тебе многие смогут изменить свою жизнь! Уверен, что они в долгу не останутся и непременно компенсируют тебе твои труды и бессонные ночи. У тебя лучший курс по JS, React-Redux на ютубе. Не расстраивайся, что тухло с донатами. Все впереди! Ты - настоящий мужик!!!!

[@ITKAMASUTRA]

Летим!!!! Коммунисты-самураи вперёд ;)

[@orangedragonthebestraper]

ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud

[@user-so8jw7zb5l]

Я сейчас только на 21, но лайкну авансом. Спасибо вам.)

[@ashotbarsegyan7007]

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

[@andji8709]

@@ashotbarsegyan7007 Автору можно оказать денежную поддержку, оплатив подписку на API, по ссылке в описании

[@BenMinsk]

@@ashotbarsegyan7007 , дошел до 100го выпуска?

[@Moroir]

По лайкам ориентируюсь что уже делал, когда в транспорте с телефона вперёд забегаю >

[@wild_wizards]

Лайк! Все отлично! Библиотека устарела, но лучше по тутору учиться т.к. разобраться в Formik библиотеке это как ходить по минному полю в одиночку, можно, но очень долго и медленно. Установить библиотеку можно так npm i redux-form --force. Всем удачи, едем дальше.

[@xikikamori2327]

Благодарю

[@user-cd6pc5fj8z]

дай бог тебе здоровья)

[@valerijhegaj]

yarn add redux-form --force может тебе все поломать)

[@user-cd6pc5fj8z]

@@valerijhegaj да я уже решил отказаться от нее

[@user-zu2xo1eb5o]

@@user-cd6pc5fj8z расскажи поподробнее)

[@user-ls6dl1yy6v]

Спасибо всем за поправки к туториалу , сто лет вам жить ))))

[@ercog7921]

Очень крутой курс! Я теперь чувствую себя на 3/4 самураем)

[@user-cz6jc9lw4j]

С этого урока легко можно начинать писать что-то самому(кстати, *очень* полезно), спасибо *большое* за время, проведённое за этими уроками и инфу)

[@mikhail_shokun]

В марте 2022 года используем или React Final Form или как я Formik в терминале инсталим вместо redux-form npm install formik npm install yup В "Путь самурая 2.0" на 13 уроке Димыч переходит на Formik Пишем: ------------------------------------------------------------------------------------------ файл Login.jsx : import React from "react"; import {Formik, Form, Field, ErrorMessage} from "formik"; import loginFormSchema from "../FormValidation/LoginFormSchema"; const Login = () => ( Login { const errors = {}; if (!values.email) { errors.email = 'Required'; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email) ) { errors.email = 'Invalid email address'; } return errors; }} onSubmit={(values) => { console.log(values) }} validationSchema={loginFormSchema}> {() => ( remember me Log in )} ); export default Login ---------------------------------------------------------------------------------- создаем в папке components папку FormValidation, в ней файл LoginFormSchema.js и пишем : import * as Yup from "yup"; const loginFormSchema = Yup.object().shape({ name: Yup.string() //минимальная длина - 2 символа .min(2, "Must be longer than 2 characters") //максимальная длина - 20 символов .max(20, "Nice try, nobody has a first name that long") .required("Required"), password: Yup.string() .min(8, "Must be longer than 8 characters") .required("Required") }); export default loginFormSchema; ----------------------------------------------------------------------------------------- 5 минут --- полет нормальный

[@regedam7559]

В combineReducers не нужно ничего добавлять, верно?

[@nfmeee]

@@regedam7559 +

[@marina.health]

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

[@dmitriyshafalyuk4240]

спасибо! Очень выручил🤛

[@slavyanski_lis]

В loginFormSchema нужно указать не name, а email, не сабмитилась форма) спасибо!

[@territory_of_manifestation]

Димыч красава, продолжай бомбить! Я уже на 43, скоро подтянусь) Вообще весело тут и конкурсы хорошие, во всех участвую)

[@johndoe034]

Отличная серия уроков и канал в целом, огромный плюс тебе в карму за твои старания! У тебя талант объяснять сложные вещи очень простым языком. Проходил несколько курсов по Реакту от топовых преподов на Udemy и оффлайн в IT-компании, но всегда оставались вопросы по многим темам, ответы на все из которых нашел в этом курсе. Будет супер, если будет продолжение этого плейлиста для следующего уровня

[@user-fs4sl5my1o]

redux-form это круто !!! Очень упрощают разработку, особенно когда ты в них уже разобрался ) Спасибо за уроки !

[@orangedragonthebestraper]

ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud

[@liberty2862]

Просто супер)) Дошел до 75 урока как смотря Игру престолов))))) Надеюсь уже скоро второй сезон? А то осталось не так много))

[@miroslavtoikin]

Спасибо, Димыч, redux-form просто лютый помощник, подача как всегда на высоте!)

[@tema_skakun]

не испытал никаких трудностей при установке redux-form, npm install redux-form (--force - не использовал). ошибок и ворнингов не обнаружил. полёт нормальный. можно поюзать redux-form в качестве обучалки для работы с формами, а потом как говорит Димыч, когда будет ясна проблематика, разные решения/библиотеки применять легче. #reduxForm #практика #примеры #уроки #курс

[@Viamsupervadetvadens]

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

[@NikitaBudyakov]

Вот это огонь, круто!!! Спасибо, супер полезно. Redux-form вещь важнетская ))

[@theWorldIsMultivariate]

Спасибо за урок redux-form, было очень интересно и полезно!

[@plotitsyn]

Самое доступное видео по redux-form, как составляющее отличного курса по ReactJS. За плечами 3/4 курса. Будем пытатся делать д/з с чистой, проплаченной за API, совестью. И, конечно же, традиционное Спасибо автору.

[@ArturZalewski]

Отличный опыт, Димыч! Благодаря твоим подробным разъяснениям, получилось сделать и логи, и логаут, и нужные редиректы для юзабилити. Собственные, хотя и маленькие успехи, очень мотивируют. Redux-form, хотя и старая deprecated библиотека, всё-таки на многих старых проектах используется и знать как она работает - очень полезно. Уверен, что остальные, тот же Formik, концептуально далеко не ушли.

[@biovrad]

redux-form -это круто! очень облегчает жизнь) React, redux -лучшие уроки на этом канале

[@ruslankonychev1137]

Дима,ты крут!Особенно подачей материала.Спасибо тебе за то что ты есть...

[@amormarinero1189]

Только начала смотреть проект, надеюсь дойти до конца, спасибо!

[@maks-kander6665]

@@BenMinsk походу нет

[@user-gt5ux9cx6p]

@@BenMinsk Ты сам дошел?

[@iDobrik]

Крутой урок, Спасибо Димыч! Видимо есть несколько альтернатив redux-form и решил использовать хук react-hook-form, а не formik. Показался очень удобным вариантом.

[@arrowdev1042]

Ох Димыч, раньше сериал смотрел теперь твои ролики, надеюсь после этих 100 выпусков будет что ещё посмотреть на канале, привык уже к движухе) Благодарочка Тебе! Космос впереди)

[@user-tf6jz7hj9d]

redux-form реально классная и супер полезная вещь оказалась! Спасибо!

[@user-sg2sx9em5c]

Спасибо за введение в ReduxForm. Летим дальше) пс. React JS, redux-form, login

[@parnasmi]

Хороший урок. Мне понравился. Я обычно использую formik. Просто дали проект на котором использован redux-form. И хотелось что нибудь посмотреть. Кстати, на prop component у Field у можно передать любой кастомный форм элемент с обертками и сообшениями ошибки.

[@ctumyji9737]

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

[@spacerider9426]

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

[@ihordoroshenko2158]

Очень круто пояснено, сам когда-то провалился на валидации огроменной формы, тогда фирма как раз переходила с первого Angular на более новый, а я еще и новичком был, полный хардкор в общем. Так что сейчас смотрю и благословляю разработчиков redux-form. Ну и Димыча конечно.

[@ITKAMASUTRA]

вообще работа с формами, большими в особенности - всегда нелегкая задача... Кстати, Ангулар где-то в моей картине мира лучше с этим справляется)

[@user-fs1ux7dy6r]

Redux form понятно и полезно. Крутой урок. Подписка оформлена. Кто еще не сделал, давайте поддержим Димыча.

[@alekseyberezov8020]

redux-form - очень полезная библиотеча! Бомбим дальше!

[@romanpomin1967]

redux-form - круто) Альтернатива есть - formic. Спасибо 100-му выпуску))

[@sergeyprivalov9442]

От души бро! Спасибо за чёткие видосы. Бомбим, задротим, летииим!

[@konstantinkuksov914]

Действительно крутая фишка, которая, когда в ней разбираешься, существенно экономит время и строки кода!

[@dardtwey860]

Это божественный курс!!!!!!

[@denkodatskyi3381]

React JS - redux-form введение (login) Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)

[@nabosFILL]

Когда ты первый раз показал редакс, пошел сделал свою валидацию формы) Теперь переделал, боже какой кайф не писать свой стейт на форму!!! Кайф.

[@ITKAMASUTRA]

Ага))

[@user-jx7ez8xv2e]

Пользуясь добрым советом решил сделать регистрацию самостоятельно. Вроде ничего сложного, но черт меня дернул вот здесь заменить component на render, подумал, что так правильнее. В результате все стало работать через раз, страшные красные сообщения, перекорежил кучу файлов пытаясь выяснить в чем дело, убил два вечера пока не понял в чем дело. Понял, что спать надо ночью больше четырёх часов. Движемся дальше! Вперёд, куда же ещё.

[@ltdsci2171]

Чувак, а это ты на фото? Респектос! В таком возрасте фронтенд юзать! Красава!

[@user-bx7ly2th3b]

А в чем проблема-то была в итоге? надо было для render передавать коллбэк, а не ссылку на компонент? }/>?

[@user-jx7ez8xv2e]

@@user-bx7ly2th3b Проблема была в невнимательности усугубленной недосыпом и из-за этого имела место опечатка (вместо "component" написал "render") которую я долго искал. )

[@user-bx7ly2th3b]

@@user-jx7ez8xv2e понял)

[@pauldudich]

@@ltdsci2171 Фроентэнд - это не высшая наука какая-то ) любой может освоить

[@Andrei-nr2oi]

Redux form все таки предоставляет годную функциональность для работы с формами!!! Уже реализовал логинизацию. Спасибо за объяснение!!! Летим дальше!!!

[@user-tr8hr4xm1l]

Ураааа Димыч вернулся на экран!!!! redux-form погнали

[@user-ei5zp2qi4j]

спасибо очень полезный урок

[@mykhailostepanishchev6472]

Шикарный урок,большое спасибо ! redux-form

[@Smash69ful]

Отличный урок. Узнал много нового. React Redux redux-form login js

[@user-kx3ts4ok8y]

Чувак ты всегда понятно объясняешь спасибо!!! Сделайте курс про knockout js!!!! жду спасибо заранее)

[@ITKAMASUTRA]

Ой нет, вы что, этот фреймворк можете выбросить в корзину уже. я в свое время с ним поработать успел, но его время прошло

[@mrmicolka]

React JS redux-form Первое впечатление: "Них себе магия!" Спасибо за урок) На сайте с Апишками в описании запроса DELETE /auth/login написано Unfollow requested user. Наверное там должно было быть что-то типа Unauthotize on the service

[@vadikpanchuk4978]

Конструктор REDUX-FORM класс! Димыч респект!

[@benatoyan5142]

spasibo ti luchshe vsex

[@kondakov90]

Форму подключил через compose. Ты был прав, очень удобно.

[@oconnor4417]

Кайф, все получилось, летим дальше !❤

[@semial]

Спасибо за урок, Димыч! Хочется самому конечно сделать, но почему-то в некоторых моментах у меня не догоняется мысля, поэтому перейду к следующему ролику и посмотрю модель построения.

[@elenakniazeva5388]

ох какая полезная вещь redux-form, спасибо!

[@user-jm9zo5re8e]

Спасибо у нас много информатики в колледже ты мне очень помог своими видео.

[@user-tf1rn7qq2p]

Большое реактивное спасибо, Димыч! redux-form введение (login)

[@user-tp4fn2dl9w]

Ку-ку)) спасибо за курс! 👏React redux-form

[@marsonleonardovich4036]

В очередной раз спасибо) Всё понятно! redux-form!

[@bitcoin-]

Домашку сделал за 10 минут.Урок отличный. Залогинился через форму.И на сайте тоже автоматически вошло в личный кабинет под моим логином.

[@ITKAMASUTRA]

Огонь!!!!

[@llelya]

Любовь к этому курсу - это когда смотришь с компа видос и включаешь его же с телефона без звука, что бы Димычу капали копеечки с рекламы) Апишку пропалила, позже будет донат♥️

[@ITKAMASUTRA]

Спасибо за рекламу и вообще обратную связь 🥰

[@user-di9dd7bb4l]

React JS redux-form Спасибо за урок

[@maxkos6184]

Go, go, go... JS Samurai !!!! Redux, React, redux-form !!! Every day I code every day I win!!! Super JS React motivator. It's just the best React courses I've ever seen

[@tanyatritelnitskaya1911]

Спасибо, Дима! Redux-form - это круто!!!!

[@shiryaev585]

Redux-form. Классный урок! Спасибо

[@edik180496]

круто! спасибо за видос

[@rahalmamut01]

Димыч, спасибо тебе за труд!

[@user-ly5ez5ln7y]

Круто, и на сайте инфа доступно подана

[@user-np9mq5xc7j]

Круто. Спасибо! Сделал как в видео всё получилось!

[@user-ep1ny3qq9g]

лучшее видео по redux-form react )))

[@frontendtwo7743]

Спасибо за урок!!! Димыч ты красавчик redux-form стали понятны)

[@olgaguseva7653]

Мэджик! Лучшее объяснение React JS - redux-form введение (login)

[@user-mf9uc3he8b]

Redux-form - это круто

[@TRIZ-Bogatyregold]

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

[@MikhailKuklenkov]

Благодарю за контент, Дима! Королевский лайк)

[@GoldenPrinceYT]

Спасибо! Глянул для ознакомления, но буду изучать react-hook-form

[@Vllad_Ko]

Redux-form это отличная фича! Как и весь Redux. React + Redux это мощь!

[@user-bd4lw9hx3s]

Сделал сам логинизацию и релогинизацию! Дмитрий лучший: великолепные объяснения, веселый и добрый подход! Очень хороший курс по React - Redux!

[@orangedragonthebestraper]

Как?

[@user-bd4lw9hx3s]

@@orangedragonthebestraper что как? Логинизацию? Вник, поломал голову и сделал) или как дела вообще? Тружусь во фронте уже 9 месяцев. Зп 80. Удаленка. Коллектив хороший, проекты интересные. Курс Дмитрия до сих пор актуален. Не так уж много в реакте изменилось с того времени) потребность довольно высокая в специалистах в РФ

[@orangedragonthebestraper]

@@user-bd4lw9hx3s да, как сделал логинизацию?подскажи если это так просто!

[@user-xn8zi3re6i]

API, JS, TS,ajax State, Store, Dispatch ,Connect, Action, Route Provider, Reducer, mapStateToProps mapDispatchToProps, {...state}, Props React Redux ,withRouter redux-thunk Redirect Практика, cookie,login follow-unfollow api redux-thunk High Order Component (hoc) setState, local state compose create-react-app http put, local state componentDidUpdate redux-form JavaScript курс React DAL, axios.create Веб разработка разметка best of the best!!! Спасибо за урок :)

[@SerhiiD11010]

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

[@codegorian6057]

Redux-form спасибо Димыч, очень полезный урок

[@marina-ej4qd9kc1wh]

redux-form. Приятное видео. Спасибо

[@Titanidze17]

Спасибо, лучший :)

[@user-nk6ih7uh1h]

Сейчас Redux Form уже не используется, нужно использоватьт его аналоги: React Final Form (это от разработчика Redux Form) или Formik. Вообще аналогов достаточно, но Redux Form уже окончательно устарел. Всем удачи! Дима, спасибо, это лучший бесплатный курс по реакту! Бахаем React JS. Учим JavaScript

[@orangedragonthebestraper]

ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud

[@miguelgrushetckii4839]

Redux-form - супер, спасибо Димыч!!!

[@evgeniytitovskiy2848]

пропустил проп component по невнимательности. Очень крутой курс по react edux. Спасибо!

[@sergsergey4251]

Было интересно. Бомбим дальше ©

[@ivanmiarkulau8320]

спасибо за урок о redux-form!)

[@MrSvent0vit]

хоткей Ctrl+P в консоли хрома - это огонь! давно надоело накликивать по папкам путь к нужному файлу )

[@sanbuz]

Спасибо ! redux-form газую дальше

[@technical777]

React JS - redux-form Димыч спасибо ! ! !

[@user-lk4mb3nw3d]

Да +++ за формик, обновить бы эту часть

[@ole_oli]

redux-form это круто, спасибо Димычь!!!

[@danissimo4044]

Прикол в том что, я свою форму создал ещё на уроке про API, когда всё только начиналось:)

[@fargutvest]

обязательно нужно в редюсеры добавить редьюсер под именем именно form, потому что библиотека redux-form будет искать в сетйте редьюсер именно под этим именем! Все круто, интерестно и понятно! Спасибо! redux-form React Redux

[@semenosekov9451]

круто! перепрыгнул с 40 урока сюда потому что не захотелось для каждого инпута делать Ref и onChange

[@user-gt5ux9cx6p]

Ну как, устроился?

[@is_eliseeva]

2024-06-02 в одном из Field написала component вместо component={'input'}, попадала куча ошибок, пробовала разные варианты и вот обнаружила ее. все заработало, ура! спасибо за урок! всем привет из #itincubator! #react

[@sitenno7331]

Redux-form ありがとうございました。

[@amaxe12345]

Спасибо Димыч! React JS - redux-form введение (login) #reduxForm #reactjs

[@sergeyplotnikov5031]

Офигенно!! Спасибо!