Работа с Redux-form

@Alborki · Регистрация: 28.01.2020

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
Помогите понять ("прощупать") как попал объект с данными собранными из form в качестве аргумента formData функции onSubmit?

p/s Пожалуйста, не пишите, что redux-form устаревшая технология и не советуйте formic, react-form и т.д. Так уж получилось, что нужно разобраться именно с redux-form

Javascript

import React from "react";
import { Contact } from "../ProfileInfo";
import {
  createField,
  Input,
  Textarea,
} from "../../../common/FormsControls/FormsControls";
import { reduxForm } from "redux-form";
 
const ProfileDataForm = ({
  profile,
  handleSubmit,
 
}) => {
  return (
    <form onSubmit={handleSubmit}> //handleSubmit пришел к нам из props а туда он попал благодаря reduxForm.  И handleSubmit собрал данные из форм в объект, например, такой: {fullName: 'Bill', lookingForAJobDescription: 'JS', aboutMe: 'programmer', lookingForAJob: true}
 
      <div>
        <b>Full Name: </b>
        {createField("Full Name...", "fullName", Input, [])}
      </div>
 
      <div>
        <b>Looking for a job:</b>{" "}
        {createField("", "lookingForAJob", Input, [], "", { type: "checkbox" })}
      </div>
 
      <div>
        <b>My professional skills:</b>
        {profile.lookingForAJobDescription}
        {createField(
          "My professional skills...",
          "lookingForAJobDescription",
          Textarea,
          [],
          ""
        )}
      </div>
 
      <div>
        <b>About Me:</b>
        {createField("About Me...", "aboutMe", Textarea, [], "")}
      </div>
 
      <div>
        <b>Contacts:</b>{" "}
        {Object.keys(profile.contacts).map((key) => {
          return (
            <Contact
              key={key}
              contactTitle={key}
              contactValue={profile.contacts[key]}
            />
          );
        })}
      </div>
 
      <div>
        <button>Save</button>
      </div>
    </form>
  );
};
 
const ProfileDataFormReduxForm = reduxForm({ form: "edit-profile" })(
  ProfileDataForm
);
 
export default ProfileDataFormReduxForm;

Javascript

import React, { useState } from "react";
import Preloader from "../../common/preloader/preloader";
import style from "./ProfileInfo.module.css";
import ProfileStatusWithHooks from "./ProfileStatusWithHooks";
import userPhoto from "../../../assets/images/user_unisex.png";
import AvatarAddr from "./AvatarAddr/AvatarAddr";
import ProfileDataFormReduxForm from "./ProfileDataForm/ProfileDataForm";
 
const ProfileInfo = ({ profile, status, updateStatus, isOwner, savePhoto }) => {
  let [editMode, setEditMode] = useState(false);
 
  if (!profile) {
    return <Preloader />;
  }
 
  const onSubmit = (formData) => {//Как сюда попал объект {fullName: 'Bill', lookingForAJobDescription: 'JS', aboutMe: 'programmer', lookingForAJob: true} с информацией из form? Помогите пошагово проследить его путь
    console.log(formData);
  };
 
  return (
    <div>
      <div className={style.descriptionBlock}>
        <img src={profile.photos.large || userPhoto} alt="avatar" />
        {isOwner && <AvatarAddr savePhoto={savePhoto} />}
        {editMode ? (
          <ProfileDataFormReduxForm profile={profile} onSubmit={onSubmit} />
        ) : (
          <ProfileData
            goToEditMode={() => {
              setEditMode(true);
            }}
            profile={profile}
            status={status}
            updateStatus={updateStatus}
            isOwner={isOwner}
          />
        )}
      </div>
    </div>
  );
};
 
const ProfileData = ({
  profile,
  status,
  updateStatus,
  isOwner,
  goToEditMode,
}) => {
  return (
    <div>
      <div>
        <p>{profile.fullName}</p>
      </div>
      <div>
        <p>
          <ProfileStatusWithHooks status={status} updateStatus={updateStatus} />
        </p>
      </div>
      <div>
        <b>Looking for a job:</b> {profile.lookingForAJob ? "yes" : "no"}
      </div>
      {profile.lookingForAJob && (
        <div>
          <b>My professional skills:</b> {profile.lookingForAJobDescription}
        </div>
      )}
      <div>
        <b>About Me:</b> {profile.aboutMe}
      </div>
      <div>
        <b>Contacts:</b>{" "}
        {Object.keys(profile.contacts).map((key) => {
          return (
            <Contact
              key={key}
              contactTitle={key}
              contactValue={profile.contacts[key]}
            />
          );
        })}
      </div>
      {isOwner && (
        <div>
          <button onClick={goToEditMode}>Edit</button>
        </div>
      )}
    </div>
  );
};
 
export const Contact = ({ contactTitle, contactValue }) => {
  return (
    <div className={style.contact}>
      <b>{contactTitle}</b>: {contactValue}
    </div>
  );
};
 
export default ProfileInfo;

Добавлено через 2 часа 34 минуты
Вот еще связанный с вопросом код.
Но это второстепенный. Самое нужное в первом посте

Javascript

import React from "react";
import style from "./FormsControls.module.css";
import { Field } from "redux-form";
 
const FormControl = ({ input, meta: { touched, error }, ...props }) => {
  const hasError = touched && error;
 
  return (
    <div className={style.formControl + " " + (hasError ? style.error : "")}>
      <div>{props.children}</div>
      {hasError && <span>{error}</span>}
    </div>
  );
};
 
export const Textarea = (props) => {
  const { input, ...restProps } = props;
  return (
    <FormControl {...props}>
      <textarea {...input} {...restProps} />
    </FormControl>
  );
};
 
export const Input = (props) => {
  const { input, ...restProps } = props;
  return (
    <FormControl {...props}>
      <input {...input} {...restProps} />
    </FormControl>
  );
};
 
export const createField = (
  placeholder,
  name,
  component,
  validators,
  className,
  props = {},
  text = "",
) => {
  return (
    <div>
      <Field
        className={className}
        placeholder={placeholder}
        name={name}
        component={component}
        validate={validators}
        {...props}
      />
      {text}
    </div>
  );
};

@MaksimkaI · 04.10.2021, 08:31

Alborki, он у тебя не попал а попадет, когда нажмешь кнопку сабмита.
Вообщем. Ты создаешь redux form, задаешь ему имя - edit-profile,
далее ты обертываешь свою форму в этот redux form, у твоей формы теперь будет onSubmit с redux form. Так же используя
Field, redux form понимает какие поля будут и будет наблюдать за ними, я думаю эти поля даже контролируемые, хотя и не уверен. И весь стейт формы хранится в redux, когда нажимаешь onSubmit, он тебе его выдает.
Надеюсь стало немного понятнее

@Alborki · 10.10.2021, 13:32 **[ТС]**

Alborki, он у тебя не попал а попадет, когда нажмешь кнопку сабмита.

Спасибо, вопрос не в этом, общую механику работы redux form я понимаю.
Я детально, пошагово не могу проследить поток, как это значение попадет после сабмита

Пока остановился на том, что работает и работает..
Пишу код дальше.
Типо - Чудо

@Alborki · 12.10.2021, 14:47 **[ТС]**

Ведь onSubmit в компоненте ProfileInfo и в ProfileDataForm это вроде совсем разные сабмиты.
В первом случае - это написанная нами функция, а во втором это подписка на событие сабмит в теге form.
Понятно, что редакс-форм сохраняет данные собранные слушателем сабмита в своем локальном стейте, но как этот объект был передан в нашу функцию onSubmit в компоненте ProfileInf?
По через props как-то?
Но я не могу проследить как

Добавлено через 7 минут
Или onSubmit в компоненте ProfileInfo напрямую лезет как-то в стейт редакс-форм и достает оттуда formData?

@Alborki · 13.10.2021, 19:56 **[ТС]**

Все разобрался. Объект formData передает в качестве аргумента handleSubmit - метод предоставляемый redux-form.
handleSubmit делает следующее:
1. e.prevendDefault - отменяет действие баттона по-умолчанию
2. Собирает все данные из form и помещает их в объект formData
3. Вызывает и передает объект formDataв качестве аргумента в функцию onSubmit, которую получает в props из LoginReduxForm props.onSubmit(formData );

Добавлено через 1 час 20 минут
Вопрос закрыт.
Всем спасибо!

@MaksimkaI 130 / 68 / 31 Регистрация: 24.07.2018 Сообщений: 787
	04.10.2021, 08:31	2
	Alborki, он у тебя не попал а попадет, когда нажмешь кнопку сабмита. Вообщем. Ты создаешь redux form, задаешь ему имя - edit-profile, далее ты обертываешь свою форму в этот redux form, у твоей формы теперь будет onSubmit с redux form. Так же используя Field, redux form понимает какие поля будут и будет наблюдать за ними, я думаю эти поля даже контролируемые, хотя и не уверен. И весь стейт формы хранится в redux, когда нажимаешь onSubmit, он тебе его выдает. Надеюсь стало немного понятнее 1

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170
	10.10.2021, 13:32 [ТС]	3
	Alborki, он у тебя не попал а попадет, когда нажмешь кнопку сабмита. Спасибо, вопрос не в этом, общую механику работы redux form я понимаю. Я детально, пошагово не могу проследить поток, как это значение попадет после сабмита Пока остановился на том, что работает и работает.. Пишу код дальше. Типо - Чудо 0

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170
	12.10.2021, 14:47 [ТС]	4
	Ведь onSubmit в компоненте ProfileInfo и в ProfileDataForm это вроде совсем разные сабмиты. В первом случае - это написанная нами функция, а во втором это подписка на событие сабмит в теге form. Понятно, что редакс-форм сохраняет данные собранные слушателем сабмита в своем локальном стейте, но как этот объект был передан в нашу функцию onSubmit в компоненте ProfileInf? По через props как-то? Но я не могу проследить как Добавлено через 7 минут Или onSubmit в компоненте ProfileInfo напрямую лезет как-то в стейт редакс-форм и достает оттуда formData? 0

@Alborki 38 / 14 / 4 Регистрация: 28.01.2020 Сообщений: 170
	13.10.2021, 19:56 [ТС]	5
	Сообщение было отмечено DrType как решение Решение Все разобрался. Объект formData передает в качестве аргумента handleSubmit - метод предоставляемый redux-form. handleSubmit делает следующее: 1. e.prevendDefault - отменяет действие баттона по-умолчанию 2. Собирает все данные из form и помещает их в объект formData 3. Вызывает и передает объект formDataв качестве аргумента в функцию onSubmit, которую получает в props из LoginReduxForm props.onSubmit(formData ); Добавлено через 1 час 20 минут Вопрос закрыт. Всем спасибо! 0

Работа с Redux-form

Решение