76 - React JS - redux-form опять про базовые вещи

Ребят, чётко зафиксируйте алгоритм и шаги по внедрению redux-form!!! У вас получится!!! Тренируйтесь!!! В следующем выпуске будет делать с вами валидацию!!!

Летим, самураи!!!

* Сайты:

* Мы в соц. сетях:

* Мои личные VK и Insta:

#reduxForm #практика #примеры #уроки #курс

[ВикторКысса-ях]

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

[sergiystebelskiy]

У меня уже фантазия закончилась что-то писать...
Просто лайк поставил и спать)

[Rapterlol]

Все агонь!! React JS, redux, redux-form лучшие уроки!!
Ну и конечно отдельный респект за песню в конце!!)
Продолжай и не останавливайся, у тебя талант!

[andreiribac]

05.08.021 Понимание с Непониманием чередуется не только от урока к уроку, но и при просмотре каждого урока! Обязательно нужно пересмотреть все несколько раз! Димычу спасибо! Всем обучающимся, терпения и стойкости!

[Kpimco]

Дико круто! Не стал использовать redux form, сразу переключился на react-hook-form. Момент с одинаковыми задачами, проблемами стал куда понятнее. Начал понимать что инструментов для решения поставленной задачи действительно много. И когда используешь другой инструмент, отличный от урока, начинаешь действительно думать. Уже точно не получиться списать и сделать всё под копирку, необходимо писать самому. Но после того как у тебя получается, то приходишь в восторг! Спасибо тебе за вот такие эмоции и улыбки до ушей xD

[maliksoltukiev]

Как же я благодарен тебе за этот курс, очень многое узнал. Песня в конце мотивирует, да и благодаря тебе я полюбил реакт. Особенно нравится, что ты часто повторяешь все, что мы уже прошли. Спс огромное, если бы не этот курс, я бы архитектуру наверное так и не понял, это просто чудо, что ты помогаешь простым людям, как я, у которых нет денег купить платные курсы . Идем дальше!!!

[alexanderbunin]

Мотивация как батарейка - постепенно заканчивается. Спасибо, что периодически ее подзаряжаешь. За песню респект✊

[nescape]

Обобщение: урок про рефакторинг кода в диалогах и постах, используя redux-form. Что конкретно было сделано:
1) вынесены поля и кнопки в отдельную компоненту, основа которой form с переданным onSumbit={props.handleSubmit}
2) поля ввода заменены на Field с соответствующими атрибутами (component, name, ...)
3)создана функция отправки поста/сообщения, которая через колбэк отправляет введенные данные с поля в экшн котоорый диспатчится в state.
Функция принимает объект содержащий все что было изменено в форме.
let addNewMessage = (values) => {

}
4) данную функцию передаем в контейнеруню компоненту созданную хоком через props
<DialogsAddMessageReduxForm onSubmit={addNewMessage}/>
5) хок создается на основе компоненты с формой при помощи метода reduxForm импортированого из redux-form, где вторым параметром передаем саму компоненту, а превым - указываем название формы в виде объекта (который потом уйдет в state)
const DialogsAddMessageReduxForm = reduxForm({form:
6) если есть контейнерная компонента, то удаляем в mapDispatchToProps методы с отслеживанием поля ввода (например экшн креатор updateNewMessageText )
7) в Reducer удаляем все что связано с отслеживанием поля ввода (например экшн креатор updateNewMessageText )
8) в Reducer меням принцип добавления сообщения/ поста. Текст сообщения берем не из state а из приходящего экшна addPost/addMessage, содержащий введенный текст при вызове диспатча экшна:
->
addMessage: (newMessageText) => { } ->
export const addMessageActionCreator = (newMessageText) => { return ({ type: ADD_MESSAGE, newMessageText }) } ->
let newMessage = {
id: + 1,
message: action.newMessageText,
}

[elenakniazeva]

респект за песню и за то, что даешь влюбиться в React )

[maxim.saharov]

- может кому будет полезно - делал с помощью Формик - у меня вышел такой код в файле Dialogs - и даже зануление нагуглил и добавил).
В компоненте Dialogs - пишем <AddMassageForm />
и создаем:
const AddMassageForm = (props) => {


let addNewMessage = (values) => {

props.sendMessage( values );

}

return (
<Formik
initialValues={{
newMessageBody: ""
}}
onSubmit={(values, {resetForm}) => {
addNewMessage( values.newMessageBody );
resetForm( {values: ''} );
}
}
>
{() => (
<Form>
<div>
<Field
name={'newMessageBody'}
as={'textarea'}
placeholder={'enter text'}
/>
</div>

<button
</Form>
)}
</Formik>
)
}

[yuryhouse]

Пытался устроиться в IT-компанию разработчиком, не хватило опыта, но меня не отправили на все 4, а перекинули в технический отдел, т.к. я хорошо разбираюсь в естестенных науках и нелохо говорю по-английски. Как итог: завтра мой первый день в роли технического писателя. Буду бомбить интернет-гайды для софта.

[ОленькаМослакова]

Дима, очень заряжаешь
А твои песенки-отдельная любовь и состояние
СПАСИБО

[lilwayne]

Ты лучший учитель программирования. Так подробно всё объясняешь )

[dmitrylebedev]

Я использовал react-hook-form, очень просто и удобно

[advhunter]

Димыч ты красавчик. Давай херячь новые уроки, ждём с

[autotune]

Спасибо бро за такой ценный контент. Го дальше.

[smolhs]

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

[sqpine]

Я использовал библиотеку Formik. Там значение тоже сохраняются в локальный стейт. Просто проще управлять. Немного пришлось с промисами поигратся. Также сделал проверку на то, пустая ли строка и очитска формы. Спасибо Димыч!!!!💜💜💜

[aleksandr]

По поводу ошибки в коде в конце видео. Стоило сразу посмотреть консоль. Там была указана строка и имя файла, где произошла ошибка в конечной её точке. Таймкод 30:22 "in Field (at MyPosts.jsx : 9)", то есть на 9-ой строчке файла MyPosts.jsx.
А так... Димыч крутяк. Хороший курс, однозначно. Продолжаю изучать.

[mariia]

круто круто!сделала сама, спасибо, Димыч! Лучшее объяснение redux-form