Условно переставить реагирующий компонент

Question

Давайте посмотрим, что у нас есть компонент Form:

//...
const formsReducer = (forms = {}, action) => {
  switch (action.type) {
    case "CREATE_FORM" : {
      const { id, inputIds } = action;

      return {
        ...forms,
        [id]: inputIds.reduce((inputs, inputId) => {

          inputs[inputId] = "";

          return inputs;
        }, {})
      };
    };
    default : return forms
  };
};
//...
import React, { useEffect } from "react";
import { connect } from "react-redux";

const createForm = (id, inputIds) => ({
  type: "CREATE_FORM",
  id,
  inputIds
})

const Form = ({
    id,
    inputs,
    onSubmit,

    createForm,

    getState //!!
}) => {

  useEffect(() => {
      createForm(id, inputs.map(({ inputId }) => inputId))
  }, []);

  submit = () => {
    const inputValues = getState().forms[id];

    onSubmit(inputValues);
  };

  return (
    <div className="form">
      {inputs.map(props => <Input {...props} />)
      <button onClick={submit}>Submit</button>
    </div>
  )

};

const mapDispatchToProps = { createForm };

export default connect(null, mapDispatchToProps)(Form);

Где входы отправляют свои значения в хранилище избыточностей.То, что я хочу заработать, - это не излишне перерисовывать компонент Form, но он должен знать входные значения при отправке.Приведенный выше пример с getState может быть хорошим решением, но, во-первых, я не знаю каких-либо возможных решений для его реализации.

Во-вторых, он получит все состояние избыточности (что не очень хорошо для производительности).Я думал о том, чтобы отправить событие с помощью кнопки отправки (например, он устанавливает state.forms[formId].submit = true, прослушивать его и вводить значения с Form по mapStateToProps, но установить React.memo наи передайте shouldComponentUpdate = (prev, next) => prev.submit !== next.submit в качестве второго аргумента.

Таким образом Form просто обновится, если получит «зеленый свет», и если submit истинно, то просто вызовет onSubmitс входными значениями из mapStateToProps. И третье решение в моем уме - сделать кнопку компонентом и прослушивать каждое изменение в форме. Повторная визуализация кнопки не так дорога, как повторная визуализация всей формы каждый раз.будет наиболее эффективным решением для этого сценария?

Answer 1

Вы не должны хранить состояние формы в избыточной форме, если вы не используете избыточную форму или вам не нужен доступ к этим данным где-то еще в приложении. Состояние компонента - гораздо лучшее решение для чего-то вроде состояния формы. Вам нужно будет повторно отобразить части формы, если вы хотите, чтобы обновления в поле отображались на экране. Использование состояния компонента означает, что вы переопределяете только форму, а не все приложение. Это должно быть хорошо с точки зрения производительности. После того, как вы установили и подтвердили данные формы, запустите функцию отправки при отправке и свяжите все обратно в избыточный.