75 - React JS - redux-form введение (login)
Vložit
- čas přidán 9. 07. 2019
- 🚀Стань квалифицированным разработчиком за 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 #практика #примеры #уроки #курс
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Внимание, сейчас Redux Form уже не используется, вот что пишут разработчики "Attention: Do not begin a project with Redux Form. The author of Redux Form has written a superior library, React Final Form."
Formik в помощь
@@user-vl9te1cg3r react-hook-form топ
и как быть?
@@mrs.doubtfire8197 я на formik перешёл. Тем более, что Димыч во второй части тоже на него переходит в одной из серий.
@@user-vl9te1cg3r вторая часть эта та, что от 100 выпусков и выше?
Пацаны, на 2:50 в комнате Димыча начинается полтергейст с дверной ручкой. Лучше б я так внимательно в код смотрел
и на 25:08
ахахаха
и на 8:55
))))))
74 выпуска ставили четкого пацана debugger, а теперь это грязная практика!
пацан зашкварился и стал нечетким))
Здорово, Дима! Не сдавайся! Фигачь! Ты нас всех подстегиваешь и подбадриваешь. 75-й урок... С другим ментором я бы уже сдулся давно! Благодаря тебе многие смогут изменить свою жизнь! Уверен, что они в долгу не останутся и непременно компенсируют тебе твои труды и бессонные ночи. У тебя лучший курс по JS, React-Redux на ютубе. Не расстраивайся, что тухло с донатами. Все впереди! Ты - настоящий мужик!!!!
Летим!!!! Коммунисты-самураи вперёд ;)
ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud
Очень крутой курс! Я теперь чувствую себя на 3/4 самураем)
Я сейчас только на 21, но лайкну авансом. Спасибо вам.)
я сейчас на 4-ом , но аналогично лайкнул авансом, спасибо большое за такой курс - честно это первый курс который обширно по крупичком создает полную картину - автору благодарность бесконечная - если есть куда задонатить кидайте ссылки - задоначу сколько смогу! Прошу не бросай дело - я всем рекламю тебя теперь.
@@ashotbarsegyan7007 Автору можно оказать денежную поддержку, оплатив подписку на API, по ссылке в описании
@@ashotbarsegyan7007
, дошел до 100го выпуска?
По лайкам ориентируюсь что уже делал, когда в транспорте с телефона вперёд забегаю >
В марте 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 минут --- полет нормальный
В combineReducers не нужно ничего добавлять, верно?
@@regedam7559 +
Блин, спасибо большое, Михаил. Очень подробно и понятно всё написал! Только в этом коде всегда ошибка будет, даже если правильно всё заполнил, не будут значения инпутов выводиться в консоль. Поэтому я без Yap сделала. Прописала проверку пароля там же, где и эмайла.
спасибо! Очень выручил🤛
В loginFormSchema нужно указать не name, а email, не сабмитилась форма) спасибо!
Лайк! Все отлично! Библиотека устарела, но лучше по тутору учиться т.к. разобраться в Formik библиотеке это как ходить по минному полю в одиночку, можно, но очень долго и медленно. Установить библиотеку можно так npm i redux-form --force. Всем удачи, едем дальше.
Благодарю
дай бог тебе здоровья)
yarn add redux-form
--force может тебе все поломать)
@@valerijhegaj да я уже решил отказаться от нее
@@user-cd6pc5fj8z расскажи поподробнее)
Спасибо за урок redux-form, было очень интересно и полезно!
С этого урока легко можно начинать писать что-то самому(кстати, *очень* полезно), спасибо *большое* за время, проведённое за этими уроками и инфу)
2024-06-02 в одном из Field написала component вместо component={'input'}, попадала куча ошибок, пробовала разные варианты и вот обнаружила ее. все заработало, ура! спасибо за урок! всем привет из #itincubator! #react
Спасибо всем за поправки к туториалу , сто лет вам жить ))))
Вот это огонь, круто!!! Спасибо, супер полезно. Redux-form вещь важнетская ))
redux-form это круто !!! Очень упрощают разработку, особенно когда ты в них уже разобрался )
Спасибо за уроки !
ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud
Спасибо, Димыч, redux-form просто лютый помощник, подача как всегда на высоте!)
Дима,ты крут!Особенно подачей материала.Спасибо тебе за то что ты есть...
redux-form реально классная и супер полезная вещь оказалась! Спасибо!
Отличная серия уроков и канал в целом, огромный плюс тебе в карму за твои старания! У тебя талант объяснять сложные вещи очень простым языком. Проходил несколько курсов по Реакту от топовых преподов на Udemy и оффлайн в IT-компании, но всегда оставались вопросы по многим темам, ответы на все из которых нашел в этом курсе. Будет супер, если будет продолжение этого плейлиста для следующего уровня
Redux form круто! Спасибо за урок Димыч!
Спасибо огромное за твой труд! Смотрю дальше!
Димыч красава, продолжай бомбить! Я уже на 43, скоро подтянусь)
Вообще весело тут и конкурсы хорошие, во всех участвую)
Шикарный урок,большое спасибо ! redux-form
redux-form -это круто! очень облегчает жизнь) React, redux -лучшие уроки на этом канале
Только начала смотреть проект, надеюсь дойти до конца, спасибо!
дошла?
@@BenMinsk походу нет
@@BenMinsk Ты сам дошел?
сам того не ожидая с первой попытки смог залогиниться, спасибо за уроки Димыч
Спасибо за введение в ReduxForm. Летим дальше)
пс. React JS, redux-form, login
Самое доступное видео по redux-form, как составляющее отличного курса по ReactJS.
За плечами 3/4 курса. Будем пытатся делать д/з с чистой, проплаченной за API, совестью.
И, конечно же, традиционное Спасибо автору.
Отличный урок. Узнал много нового. React Redux redux-form login js
Просто супер)) Дошел до 75 урока как смотря Игру престолов)))))
Надеюсь уже скоро второй сезон? А то осталось не так много))
redux-form - очень полезная библиотеча! Бомбим дальше!
React JS
redux-form
Спасибо за урок
Redux-form. Классный урок! Спасибо
От души бро! Спасибо за чёткие видосы. Бомбим, задротим, летииим!
спасибо очень полезный урок
Спасибо, Дима! Redux-form - это круто!!!!
Кайф, все получилось, летим дальше !❤
ох какая полезная вещь redux-form, спасибо!
Такс, народ, говорю снова от лица обывателя. Если у вас есть время рассмотрите библиотеку Formik, однако если вы не уверены в своих силах, или нет времени и хочется бомбить дальше - не обращаейте внимание на комменты из этого видео, устанавливайте redux-form и бомбите дальше курс, все работает без проблем. Со временем в 2.0 Димыч покажет как пользоваться и как установить Formik в 13 уроке.
Димыч, спасибо тебе за труд!
В очередной раз спасибо) Всё понятно! redux-form!
Отличный опыт, Димыч! Благодаря твоим подробным разъяснениям, получилось сделать и логи, и логаут, и нужные редиректы для юзабилити. Собственные, хотя и маленькие успехи, очень мотивируют. Redux-form, хотя и старая deprecated библиотека, всё-таки на многих старых проектах используется и знать как она работает - очень полезно. Уверен, что остальные, тот же Formik, концептуально далеко не ушли.
Это божественный курс!!!!!!
Redux-form спасибо Димыч, очень полезный урок
лучшее видео по redux-form react )))
Крутой урок, Спасибо Димыч!
Видимо есть несколько альтернатив redux-form и решил использовать хук react-hook-form, а не formik. Показался очень удобным вариантом.
Действительно крутая фишка, которая, когда в ней разбираешься, существенно экономит время и строки кода!
Большое реактивное спасибо, Димыч! redux-form введение (login)
При возникновении ошибки "You must either pass handleSubmit() an onSubmit function or pass onSubmit" смотрите видео дальше. Это потом фиксится в видео.
Redux form понятно и полезно. Крутой урок. Подписка оформлена. Кто еще не сделал, давайте поддержим Димыча.
Ку-ку)) спасибо за курс! 👏React redux-form
НИЖЕ ПОЛНОСТЬЮ РАБОЧИЙ КОД НА АПРЕЛЬ 2022
- кто хочет понимать почему он так работает - советую почитать офиц. документацию Formik, почитать все коменты под этим видео, посмотреть хотя бы 20 уроков с канала - Codevolution, также посмотреть Димыча видео номер 13 с Путь Самурая 2.0, и это видео тоже посмотреть
czcams.com/video/K6f8GAhLGKA/video.html
и вот собственно код :)
//
import React from 'react';
import {Formik, Form, Field, ErrorMessage} from "formik";
import * as Yup from "yup";
const validateLoginForm = values => {
const errors = {};
if (!values.email) {
errors.email = 'Required 1';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test( values.email )
) {
errors.email = 'Invalid email address';
}
return errors;
};
const validationSchemaLoginForm = Yup.object().shape( {
password: Yup.string()
.min( 2, "Must be longer than 2 characters" )
.max( 5, "Must be shorter than 5 characters" )
.required( "Required 2" )
} );
const Login = () => {
return (
... Login 555
{
console.log( values )
}}
>
{() => (
remember me
Login
)}
...
)
}
export default Login;
Спасибо! Очень выручил!
Спасибо! Димыч Димыч добавь в закреп коммент
Получается эта форма не подвязана через наш redux state?
@@Denis-ws1vn Я вот тоже думаю... Сделал всё через Formik а что со стейтом то? Разве сейчас у нас используется flux круговорот на каждый символ? Разве введенные данные сохраняются где-то в State? (Если разберешься с этим, обьясни пожалуйста)
@@Denis-ws1vn К настоящему моменту вы могли подумать: «Почему вы просто не использовали Redux-Form?» Хороший вопрос.
По словам нашего пророка Дэна Абрамова, состояние формы по своей сути эфемерно и локально, поэтому отслеживать его в Redux (или любой другой библиотеке Flux) не нужно.
Redux-Form вызывает весь редюсер Redux верхнего уровня несколько раз ПРИ КАЖДОМ НАЖАТИИ КЛАВИШИ. Это хорошо для небольших приложений, но по мере роста вашего Redux-приложения задержка ввода будет продолжать увеличиваться, если вы используете Redux-Form.
Redux-Form имеет размер 22,5 КБ в сжатом виде (формат Formik составляет 12,7 КБ)
Моя цель с Formik состояла в том, чтобы создать масштабируемый, производительный помощник формы с минимальным API, который делает действительно очень раздражающие вещи, а остальное оставляет на ваше усмотрение.
Благодарю за контент, Дима! Королевский лайк)
Спасибо за урок!!! Димыч ты красавчик redux-form стали понятны)
Спасибо у нас много информатики в колледже ты мне очень помог своими видео.
Конструктор REDUX-FORM класс! Димыч респект!
redux-form - круто) Альтернатива есть - formic. Спасибо 100-му выпуску))
redux-form. Приятное видео. Спасибо
спасибо за урок о redux-form!)
Спасибо! Глянул для ознакомления, но буду изучать react-hook-form
Чувак ты всегда понятно объясняешь спасибо!!! Сделайте курс про knockout js!!!! жду спасибо заранее)
Ой нет, вы что, этот фреймворк можете выбросить в корзину уже. я в свое время с ним поработать успел, но его время прошло
Redux-form - супер, спасибо Димыч!!!
Круто. Спасибо! Сделал как в видео всё получилось!
Ураааа Димыч вернулся на экран!!!! redux-form погнали
Ох Димыч, раньше сериал смотрел теперь твои ролики, надеюсь после этих 100 выпусков будет что ещё посмотреть на канале, привык уже к движухе) Благодарочка Тебе! Космос впереди)
Redux form все таки предоставляет годную функциональность для работы с формами!!! Уже реализовал логинизацию. Спасибо за объяснение!!! Летим дальше!!!
круто! спасибо за видос
Спасибо, лучший :)
redux-form это круто, спасибо Димычь!!!
Было интересно.
Бомбим дальше ©
spasibo ti luchshe vsex
Спасибо ! redux-form газую дальше
Мэджик! Лучшее объяснение React JS - redux-form введение (login)
React JS - redux-form Димыч спасибо ! ! !
Пользуясь добрым советом решил сделать регистрацию самостоятельно. Вроде ничего сложного, но черт меня дернул вот здесь заменить component на render, подумал, что так правильнее. В результате все стало работать через раз, страшные красные сообщения, перекорежил кучу файлов пытаясь выяснить в чем дело, убил два вечера пока не понял в чем дело.
Понял, что спать надо ночью больше четырёх часов.
Движемся дальше! Вперёд, куда же ещё.
Чувак, а это ты на фото? Респектос! В таком возрасте фронтенд юзать! Красава!
А в чем проблема-то была в итоге? надо было для render передавать коллбэк, а не ссылку на компонент? }/>?
@@user-bx7ly2th3b Проблема была в невнимательности усугубленной недосыпом и из-за этого имела место опечатка (вместо "component" написал "render") которую я долго искал. )
@@user-jx7ez8xv2e понял)
@@ltdsci2171 Фроентэнд - это не высшая наука какая-то ) любой может освоить
Форму подключил через compose. Ты был прав, очень удобно.
Спасибо за redux-form! Давно хотел пощупать! Есть ли какая-то разница между redux-form и Formik? Или это просто аналоги?
Хороший урок. Мне понравился. Я обычно использую formik. Просто дали проект на котором использован redux-form. И хотелось что нибудь посмотреть. Кстати, на prop component у Field у можно передать любой кастомный форм элемент с обертками и сообшениями ошибки.
Очень круто пояснено, сам когда-то провалился на валидации огроменной формы, тогда фирма как раз переходила с первого Angular на более новый, а я еще и новичком был, полный хардкор в общем. Так что сейчас смотрю и благословляю разработчиков redux-form. Ну и Димыча конечно.
вообще работа с формами, большими в особенности - всегда нелегкая задача... Кстати, Ангулар где-то в моей картине мира лучше с этим справляется)
Круто, и на сайте инфа доступно подана
Спасибо за урок, Димыч! Хочется самому конечно сделать, но почему-то в некоторых моментах у меня не догоняется мысля, поэтому перейду к следующему ролику и посмотрю модель построения.
Redux-form это отличная фича! Как и весь Redux. React + Redux это мощь!
Redux-form - это круто
Домашку сделал за 10 минут.Урок отличный. Залогинился через форму.И на сайте тоже автоматически вошло в личный кабинет под моим логином.
Огонь!!!!
Redux-form круто, спасибо Димыч)
Прикол в том что, я свою форму создал ещё на уроке про API, когда всё только начиналось:)
Офигенно!! Спасибо!
Смотрю эти уроки под пиком Балмера, получается заметно лучше)
redux-form интересно=)) спасибо!!
Когда ты первый раз показал редакс, пошел сделал свою валидацию формы) Теперь переделал, боже какой кайф не писать свой стейт на форму!!! Кайф.
Ага))
Сделал сам логинизацию и релогинизацию! Дмитрий лучший: великолепные объяснения, веселый и добрый подход! Очень хороший курс по React - Redux!
Как?
@@orangedragonthebestraper что как? Логинизацию? Вник, поломал голову и сделал) или как дела вообще? Тружусь во фронте уже 9 месяцев. Зп 80. Удаленка. Коллектив хороший, проекты интересные. Курс Дмитрия до сих пор актуален. Не так уж много в реакте изменилось с того времени) потребность довольно высокая в специалистах в РФ
@@user-bd4lw9hx3s да, как сделал логинизацию?подскажи если это так просто!
не испытал никаких трудностей при установке redux-form, npm install redux-form (--force - не использовал).
ошибок и ворнингов не обнаружил. полёт нормальный.
можно поюзать redux-form в качестве обучалки для работы с формами, а потом как говорит Димыч, когда будет ясна проблематика, разные решения/библиотеки применять легче.
#reduxForm #практика #примеры #уроки #курс
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
Круто! Спасибо огромное)
Спасибо большое, актуально даже 3 года спустя
пропустил проп component по невнимательности. Очень крутой курс по react
edux. Спасибо!
Сейчас Redux Form уже не используется, нужно использоватьт его аналоги: React Final Form (это от разработчика Redux Form) или Formik. Вообще аналогов достаточно, но Redux Form уже окончательно устарел. Всем удачи!
Дима, спасибо, это лучший бесплатный курс по реакту! Бахаем React JS. Учим JavaScript
ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud
react -redux!!! спасибище Димич!
React JS redux-form
Первое впечатление: "Них себе магия!" Спасибо за урок)
На сайте с Апишками в описании запроса DELETE /auth/login написано Unfollow requested user. Наверное там должно было быть что-то типа Unauthotize on the service
Круто, классно! redux-form
Спасибо Димыч! React JS - redux-form введение (login) #reduxForm #reactjs