75 - React JS - redux-form введение (login)
Вставка
- Опубліковано 9 лип 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 #практика #примеры #уроки #курс
Внимание, сейчас 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 выпусков и выше?
Такс, народ, говорю снова от лица обывателя. Если у вас есть время рассмотрите библиотеку Formik, однако если вы не уверены в своих силах, или нет времени и хочется бомбить дальше - не обращаейте внимание на комменты из этого видео, устанавливайте redux-form и бомбите дальше курс, все работает без проблем. Со временем в 2.0 Димыч покажет как пользоваться и как установить Formik в 13 уроке.
В марте 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, не сабмитилась форма) спасибо!
74 выпуска ставили четкого пацана debugger, а теперь это грязная практика!
пацан зашкварился и стал нечетким))
Пацаны, на 2:50 в комнате Димыча начинается полтергейст с дверной ручкой. Лучше б я так внимательно в код смотрел
и на 25:08
ахахаха
и на 8:55
))))))
Здорово, Дима! Не сдавайся! Фигачь! Ты нас всех подстегиваешь и подбадриваешь. 75-й урок... С другим ментором я бы уже сдулся давно! Благодаря тебе многие смогут изменить свою жизнь! Уверен, что они в долгу не останутся и непременно компенсируют тебе твои труды и бессонные ночи. У тебя лучший курс по JS, React-Redux на ютубе. Не расстраивайся, что тухло с донатами. Все впереди! Ты - настоящий мужик!!!!
Летим!!!! Коммунисты-самураи вперёд ;)
ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud
Лайк! Все отлично! Библиотека устарела, но лучше по тутору учиться т.к. разобраться в Formik библиотеке это как ходить по минному полю в одиночку, можно, но очень долго и медленно. Установить библиотеку можно так npm i redux-form --force. Всем удачи, едем дальше.
Благодарю
дай бог тебе здоровья)
yarn add redux-form
--force может тебе все поломать)
@@valerijhegaj да я уже решил отказаться от нее
@@user-cd6pc5fj8z расскажи поподробнее)
Очень крутой курс! Я теперь чувствую себя на 3/4 самураем)
Я сейчас только на 21, но лайкну авансом. Спасибо вам.)
я сейчас на 4-ом , но аналогично лайкнул авансом, спасибо большое за такой курс - честно это первый курс который обширно по крупичком создает полную картину - автору благодарность бесконечная - если есть куда задонатить кидайте ссылки - задоначу сколько смогу! Прошу не бросай дело - я всем рекламю тебя теперь.
@@ashotbarsegyan7007 Автору можно оказать денежную поддержку, оплатив подписку на API, по ссылке в описании
@@ashotbarsegyan7007
, дошел до 100го выпуска?
По лайкам ориентируюсь что уже делал, когда в транспорте с телефона вперёд забегаю >
С этого урока легко можно начинать писать что-то самому(кстати, *очень* полезно), спасибо *большое* за время, проведённое за этими уроками и инфу)
Спасибо всем за поправки к туториалу , сто лет вам жить ))))
Спасибо за урок redux-form, было очень интересно и полезно!
Отличная серия уроков и канал в целом, огромный плюс тебе в карму за твои старания! У тебя талант объяснять сложные вещи очень простым языком. Проходил несколько курсов по Реакту от топовых преподов на Udemy и оффлайн в IT-компании, но всегда оставались вопросы по многим темам, ответы на все из которых нашел в этом курсе. Будет супер, если будет продолжение этого плейлиста для следующего уровня
Димыч красава, продолжай бомбить! Я уже на 43, скоро подтянусь)
Вообще весело тут и конкурсы хорошие, во всех участвую)
Вот это огонь, круто!!! Спасибо, супер полезно. Redux-form вещь важнетская ))
redux-form это круто !!! Очень упрощают разработку, особенно когда ты в них уже разобрался )
Спасибо за уроки !
ребятушки, Я дико извиняюсь, вижу тут все прошаренные хацкеры - как сделать логинизацию? если это так проcто? или с помощью redux-form сейчас его нельзя сделать потому что он устарел? и в принципе работать в 2k22ом не будет? #PastorJ #OrangeDragon #DaBest #Trending #SigmundFreud
Самое доступное видео по redux-form, как составляющее отличного курса по ReactJS.
За плечами 3/4 курса. Будем пытатся делать д/з с чистой, проплаченной за API, совестью.
И, конечно же, традиционное Спасибо автору.
Спасибо, Димыч, redux-form просто лютый помощник, подача как всегда на высоте!)
Дима,ты крут!Особенно подачей материала.Спасибо тебе за то что ты есть...
redux-form реально классная и супер полезная вещь оказалась! Спасибо!
сам того не ожидая с первой попытки смог залогиниться, спасибо за уроки Димыч
Крутой урок, Спасибо Димыч!
Видимо есть несколько альтернатив redux-form и решил использовать хук react-hook-form, а не formik. Показался очень удобным вариантом.
Отличный опыт, Димыч! Благодаря твоим подробным разъяснениям, получилось сделать и логи, и логаут, и нужные редиректы для юзабилити. Собственные, хотя и маленькие успехи, очень мотивируют. Redux-form, хотя и старая deprecated библиотека, всё-таки на многих старых проектах используется и знать как она работает - очень полезно. Уверен, что остальные, тот же Formik, концептуально далеко не ушли.
Спасибо за введение в ReduxForm. Летим дальше)
пс. React JS, redux-form, login
От души бро! Спасибо за чёткие видосы. Бомбим, задротим, летииим!
redux-form -это круто! очень облегчает жизнь) React, redux -лучшие уроки на этом канале
Спасибо огромное за твой труд! Смотрю дальше!
Ох Димыч, раньше сериал смотрел теперь твои ролики, надеюсь после этих 100 выпусков будет что ещё посмотреть на канале, привык уже к движухе) Благодарочка Тебе! Космос впереди)
Только начала смотреть проект, надеюсь дойти до конца, спасибо!
@@BenMinsk походу нет
@@BenMinsk Ты сам дошел?
Отличный урок. Узнал много нового. React Redux redux-form login js
Redux form понятно и полезно. Крутой урок. Подписка оформлена. Кто еще не сделал, давайте поддержим Димыча.
redux-form - очень полезная библиотеча! Бомбим дальше!
Просто супер)) Дошел до 75 урока как смотря Игру престолов)))))
Надеюсь уже скоро второй сезон? А то осталось не так много))
Redux form круто! Спасибо за урок Димыч!
Кайф, все получилось, летим дальше !❤
Шикарный урок,большое спасибо ! redux-form
Спасибо за урок!!! Димыч ты красавчик redux-form стали понятны)
Хороший урок. Мне понравился. Я обычно использую formik. Просто дали проект на котором использован redux-form. И хотелось что нибудь посмотреть. Кстати, на prop component у Field у можно передать любой кастомный форм элемент с обертками и сообшениями ошибки.
Это божественный курс!!!!!!
Благодарю за контент, Дима! Королевский лайк)
Действительно крутая фишка, которая, когда в ней разбираешься, существенно экономит время и строки кода!
Пользуясь добрым советом решил сделать регистрацию самостоятельно. Вроде ничего сложного, но черт меня дернул вот здесь заменить component на render, подумал, что так правильнее. В результате все стало работать через раз, страшные красные сообщения, перекорежил кучу файлов пытаясь выяснить в чем дело, убил два вечера пока не понял в чем дело.
Понял, что спать надо ночью больше четырёх часов.
Движемся дальше! Вперёд, куда же ещё.
Чувак, а это ты на фото? Респектос! В таком возрасте фронтенд юзать! Красава!
А в чем проблема-то была в итоге? надо было для render передавать коллбэк, а не ссылку на компонент? }/>?
@@user-bx7ly2th3b Проблема была в невнимательности усугубленной недосыпом и из-за этого имела место опечатка (вместо "component" написал "render") которую я долго искал. )
@@user-jx7ez8xv2e понял)
@@ltdsci2171 Фроентэнд - это не высшая наука какая-то ) любой может освоить
Спасибо у нас много информатики в колледже ты мне очень помог своими видео.
React JS - redux-form введение (login)
Лучшие уроки по React JS & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just simply about information technology =)
Большое реактивное спасибо, Димыч! redux-form введение (login)
В очередной раз спасибо) Всё понятно! redux-form!
спасибо очень полезный урок
круто! спасибо за видос
Redux form все таки предоставляет годную функциональность для работы с формами!!! Уже реализовал логинизацию. Спасибо за объяснение!!! Летим дальше!!!
Спасибо, Дима! Redux-form - это круто!!!!
redux-form - круто) Альтернатива есть - formic. Спасибо 100-му выпуску))
Спасибо! Глянул для ознакомления, но буду изучать react-hook-form
лучшее видео по redux-form react )))
Ку-ку)) спасибо за курс! 👏React redux-form
ох какая полезная вещь redux-form, спасибо!
Прикол в том что, я свою форму создал ещё на уроке про API, когда всё только начиналось:)
Redux-form. Классный урок! Спасибо
не испытал никаких трудностей при установке 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
Димыч, спасибо тебе за труд!
Форму подключил через compose. Ты был прав, очень удобно.
Ураааа Димыч вернулся на экран!!!! redux-form погнали
Конструктор REDUX-FORM класс! Димыч респект!
Круто. Спасибо! Сделал как в видео всё получилось!
Круто, и на сайте инфа доступно подана
Очень круто пояснено, сам когда-то провалился на валидации огроменной формы, тогда фирма как раз переходила с первого Angular на более новый, а я еще и новичком был, полный хардкор в общем. Так что сейчас смотрю и благословляю разработчиков redux-form. Ну и Димыча конечно.
вообще работа с формами, большими в особенности - всегда нелегкая задача... Кстати, Ангулар где-то в моей картине мира лучше с этим справляется)
React JS
redux-form
Спасибо за урок
spasibo ti luchshe vsex
Спасибо за урок, Димыч! Хочется самому конечно сделать, но почему-то в некоторых моментах у меня не догоняется мысля, поэтому перейду к следующему ролику и посмотрю модель построения.
Спасибо ! redux-form газую дальше
redux-form. Приятное видео. Спасибо
React JS redux-form
Первое впечатление: "Них себе магия!" Спасибо за урок)
На сайте с Апишками в описании запроса DELETE /auth/login написано Unfollow requested user. Наверное там должно было быть что-то типа Unauthotize on the service
Redux-form спасибо Димыч, очень полезный урок
Мэджик! Лучшее объяснение React JS - redux-form введение (login)
Спасибо, лучший :)
Чувак ты всегда понятно объясняешь спасибо!!! Сделайте курс про knockout js!!!! жду спасибо заранее)
Ой нет, вы что, этот фреймворк можете выбросить в корзину уже. я в свое время с ним поработать успел, но его время прошло
Было интересно.
Бомбим дальше ©
Офигенно!! Спасибо!
спасибо за урок о redux-form!)
Домашку сделал за 10 минут.Урок отличный. Залогинился через форму.И на сайте тоже автоматически вошло в личный кабинет под моим логином.
Огонь!!!!
Когда ты первый раз показал редакс, пошел сделал свою валидацию формы) Теперь переделал, боже какой кайф не писать свой стейт на форму!!! Кайф.
Ага))
Redux-form - супер, спасибо Димыч!!!
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!!!
Спасибо за урок :)
redux-form это круто, спасибо Димычь!!!
Redux-form ありがとうございました。
2 года назад смотрел этот видос, думал мне никогда не придеться возвращаться к Redux Form, но мир жесток и несправедлив - опять изучаю эту библу
Димыч Топи, ты крутой!
НИЖЕ ПОЛНОСТЬЮ РАБОЧИЙ КОД НА АПРЕЛЬ 2022
- кто хочет понимать почему он так работает - советую почитать офиц. документацию Formik, почитать все коменты под этим видео, посмотреть хотя бы 20 уроков с канала - Codevolution, также посмотреть Димыча видео номер 13 с Путь Самурая 2.0, и это видео тоже посмотреть
ua-cam.com/video/K6f8GAhLGKA/v-deo.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. React + Redux это мощь!
Пишу как всегда до видео, потому что итак знаю что будет топ!
Спасибо Димыч! React JS - redux-form введение (login) #reduxForm #reactjs
пропустил проп component по невнимательности. Очень крутой курс по react
edux. Спасибо!
React JS - redux-form Димыч спасибо ! ! !
хоткей Ctrl+P в консоли хрома - это огонь! давно надоело накликивать по папкам путь к нужному файлу )
Круто! Спасибо огромное)
Любовь к этому курсу - это когда смотришь с компа видос и включаешь его же с телефона без звука, что бы Димычу капали копеечки с рекламы) Апишку пропалила, позже будет донат♥️
Спасибо за рекламу и вообще обратную связь 🥰
Да +++ за формик, обновить бы эту часть
обязательно нужно в редюсеры добавить редьюсер под именем именно form, потому что библиотека redux-form будет искать в сетйте редьюсер именно под этим именем!
Все круто, интерестно и понятно! Спасибо! redux-form React Redux
Сделал сам логинизацию и релогинизацию! Дмитрий лучший: великолепные объяснения, веселый и добрый подход! Очень хороший курс по React - Redux!
Как?
@@orangedragonthebestraper что как? Логинизацию? Вник, поломал голову и сделал) или как дела вообще? Тружусь во фронте уже 9 месяцев. Зп 80. Удаленка. Коллектив хороший, проекты интересные. Курс Дмитрия до сих пор актуален. Не так уж много в реакте изменилось с того времени) потребность довольно высокая в специалистах в РФ
@@user-bd4lw9hx3s да, как сделал логинизацию?подскажи если это так просто!