redux-form: как отображать значения формы на другом компоненте

Я использую redux-form 6.0.0-rc.5 и пытаюсь отобразить значения формы по мере их ввода пользователем.

Однако я хочу, чтобы эти значения отображались из другого компонента, а не из самой формы редукции.

Итак, моя упрощенная архитектура приложения будет такой:

<App />              -> (main component -container ?-)
  <List />           -> (connect to form values and pass them down)
    <Elem />         -> (display form value)
  <Form />           -> (enter form values)

Компонент представляет собой редукционную форму, смонтированную на «форме» и работающую.

Form = reduxForm({
  form: 'formName'
})(Form)

Как лучше всего получить значения формы (из состояния form.formName.values) и отправить их в компонент отображения?

Вещи, которые я пробовал:

  • Подключите App к хранилищу и mapStateToProps (form.formName.values), а затем передайте его в Display в качестве реквизита. Но это выдает ошибку, поскольку значения не существуют в состоянии формы, пока пользователь ничего не введет.

  • Используя функцию getFormValues('formName'), предоставляемую redux-form внутри компонента List, но она возвращает функцию или undefined :

Элем

const Elem = ({ name }) => (
  <li>{name}</li>
)

Список

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)

List = connect(
  state => ({
    values: getFormValues('formName')
  })
)(List)

Должно быть что-то, что я упускаю, или я все еще не понимаю, связано ли это с редукционной формой или самим редуксом... Надеюсь, кто-нибудь сможет меня просветить!

Спасибо Вам и хорошего дня.


reactjs redux react-redux redux-form
person Thomas Milan    schedule 19.08.2016    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Попробуйте использовать

List = connect(
  state => ({
    values: getFormValues(state.form.formName)
  })
)(List)

вместо. По крайней мере, так это работало в v5, хотя там метод назывался getValues, а не getFormValues.

Изменить: после беглого просмотра документов в версии 6 вам придется использовать formValueSelector: http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

person tmaximini    schedule 19.08.2016
comment
Да. formValueSelector это ответ. - person Erik R.; 20.08.2016
comment
Спасибо за ваш ответ. Я видел пример выбора значений формы, однако мое понимание документов было следующим: функция getFormValues ​​— это быстрый способ получить все значения из заданной формы в любом месте приложения (вкладка «Селекторы» в документах). И formValueSelector был сделан для получения определенных значений (имеется в виду не обязательно все значения) в редукционной форме, чтобы использовать их внутри самой формы. Это правильно ? И если мне нужно использовать formValueSelector, нужно ли мне связывать все поля формы с селектором? Еще раз спасибо, ребята! - person Thomas Milan; 20.08.2016
comment
Редактировать: Хорошо, я заставил его работать с formValueSelector, но затем я снова попробовал его с getFormValues, и это точный синтаксис, который теперь работает для меня: const selector = getFormValues('fomName') List = connect({ state => ({ values: selector(state) }) })(List) Другой синтаксис в моем исходном вопросе не работал. Может кому тоже поможет! - person Thomas Milan; 22.08.2016
comment
Как вы думаете, вы могли бы связать свое решение? Я пытаюсь сделать то же самое. - person user3768533; 11.05.2017
comment
Я использую этот метод, но не могу найти переменную «Список». Как это исправить? - person Saravana Kumar; 13.09.2017

arrow_upward
3
arrow_downward

formValueSelector() не требуется. .

Вы также можете получить к нему прямой доступ как к свойству.

List = connect(
  state => ({
    formValues: {
       id: state.form.formName.values.id
    }
  })
)(List)

Такой же как

List = connect(
  state => ({
    formValues: {
       id: formValueSelector('formName')(state, 'id')
    }
  })
)(List)
person Julha    schedule 25.12.2016
comment
знаете ли вы ту же технику для обновления значения из любой формы? - person stackdave; 03.03.2018
comment
redux-form.com/7.3.0/docs/api/actioncreators .md 1. импортировать reduxFormActions из 'redux-form/es/actions'; 2. привяжите действие изменения к вашему компоненту с помощью избыточности: bindActionCreators(reduxFormActions.change, dispatch) 3. действие вызова: this.props.actionsReduxForm('formName', fieldName, fieldValue) - person Julha; 04.03.2018
comment
bindActionCreators не работал, только this.props.dispatch(change('myform', fieldKey, filterValue)); - person stackdave; 11.03.2018

arrow_upward
1
arrow_downward

У меня такая же проблема. Судя по всему, «значения» — это сохраненное имя в редукционной форме. Используя совет Юрия Будникова, мне удалось решить проблему - просто измените имя переменной с 'values' на что-то другое в вашем вызове подключения:

List = connect(
  state => ({
    formValues: getFormValues(state.form.formName)
  })
)(List)
person Ido    schedule 06.10.2016

arrow_upward
0
arrow_downward

Начиная с редукционной формы 6.0.0 (и все так же в 7.0.0), вы можете использовать функцию formValueSelector() для выбора значений из любой редукс-формы, которая есть в вашем приложении: http://redux-form.com/7.0.0/docs/api/FormValueSelector.md/

import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('formName');

List = connect(
  state => ({
    name: selector(state, 'name')
  })
)(List)
person Tom Van Rompaey    schedule 17.07.2017
comment
Я пытаюсь создать компонент предварительного просмотра, в котором все значения отображаются до того, как пользователь сможет отправить форму. Я пытаюсь получить все значения формы из формы мастера, которая называется wizard. следующий ответ дает мне мастер не определен ошибка. Что я должен делать? - person Samia Ruponti; 18.09.2017