Как мне подключить дочерние компоненты reduxForm к состоянию redux?

У меня есть довольно сложная многоуровневая глубокая / вложенная форма, подключенная к React / Redux с использованием _ 1_. Поскольку форма очень большая, я разбил ее части на дочерние компоненты. Некоторым из этих компонентов требуется доступ к состоянию Redux, поэтому необходимо либо передавать соединения через props, либо connect()ed. Однако, когда я использую обычную функцию Redux connect() для подключения дочерних компонентов, становится невозможным редактировать поля redux-form внутри них. Поэтому я попытался использовать reduxForm() для подключения дочерних компонентов, а также родительских компонентов, что показалось неправильным, но, похоже, сработало.

Однако теперь я обнаруживаю, что некоторые функции, такие как removeField(), не работают в подключенных субкомпонентах - например, child_form.removeField(index) удаляет все child_form, а не только тот, который соответствует индексу.

Каков правильный / рекомендуемый метод подключения дочерних компонентов reduxForm() компонента к состоянию redux? Передача всего через иерархию с помощью props очень быстро станет громоздкой ...


reactjs redux react-redux redux-form
person DrMeers    schedule 08.06.2016    source источник
comment
Я думаю, что у меня, должно быть, что-то было не так с конфигурацией - эта проблема позже была решена без изменения чего-либо из вышеперечисленного!   -  person DrMeers    schedule 07.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

Однако теперь я обнаруживаю, что некоторые функции, такие как removeField(), не работают в подключенных субкомпонентах - например, child_form.removeField(index) удаляет все child_forms, а не только тот, который соответствует индексу.

Есть два способа решить эту проблему:

  1. Используйте создателей действий

    Метод removeField является оболочкой для создателя действия removeArrayValue. Вы можете отправить это действие, чтобы удалить запись из вашей формы.

    // Removes the 4th row
dispatch(removeArrayValue("myform", "myarrayfield", 3))

  2. Используйте плагин

    В плагине reducer вы можете перехватывать действия и запускать изменения состояния вашей формы. Если вы отправляете действие, вы можете перехватить его и обновить массив полей.

Передача всего через иерархию с помощью props очень быстро станет громоздкой ...

Я видел несколько обходных путей для этого.

  1. Создайте несколько форм, используя одно и то же имя формы. Внутренне Redux Form объединит их, чтобы ваше хранилище содержало данные каждой подформы в одном объекте.

  2. Подключите дочернюю форму с помощью connect и используйте создателей действий для управления состоянием.

  3. Разбейте форму на более мелкие части и передайте fields. Это мое любимое решение. Мы успешно делаем это в нашем приложении (более сотни форм!).

    const MainForm = reduxForm({
  form: "main",
  fields: [
    SubForm1.fields,
    SubForm2.fields,
    SubForm3.fields,
  ]
})(
  props => (
    <form onSubmit={props.handleSubmit}>
      <SubForm1 fields={props.fields} />
      <SubForm2 fields={props.fields} />
      <SubForm3 fields={props.fields} />
      <button type="submit">Send</button>
    </form>
  )
)

const SubForm1 = ({fields}) => (
  <div>
    <TextField {...fields.foo} />
    <TextField {...fields.bar} />
  </div>
)

SubForm1.fields = ["foo", "bar"]
person Florent    schedule 09.06.2016