web-dev-qa-db-ja.com

redux-form：別のコンポーネントにフォーム値を表示する方法

Redux-form 6.0.0-rc.5を使用しており、ユーザーが入力したフォームの値を表示しようとしています。

ただし、これらの値は、reduxフォーム自体ではなく、別のコンポーネントから表示されるようにしたいです。

だから、私の単純化されたアプリアーキテクチャは次のようになります：

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

コンポーネントは「form」にマウントされたredux-formであり、機能しています。

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

（状態form.formName.valuesから）フォーム値を取得して、それらをDisplayコンポーネントに送信する良い方法は何でしょうか？

私が試したこと：

  • Appをストアに接続し、mapStateToProps（form.formName.values）を、小道具としてDisplayに渡します。ただし、ユーザーが何かを入力するまで値はフォームの状態に存在しないため、エラーがスローされます。

  • Listコンポーネント内のredux-formによって提供される関数getFormValues（ 'formName'）を使用しますが、関数または未定義を返します：

エレム

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

リスト

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

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

何か足りないものがあるに違いないか、それがredux-formなのかredux自体なのかまだ正しく理解できていません...誰かが私を教えてくれることを願っています！

ありがとう、素晴らしい一日を。

reactjsreduxreact-reduxredux-form
6
Thomas Milan

使ってみてください

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

代わりに。少なくとも、v5ではこのように機能しましたが、メソッドはgetValuesではなくgetFormValuesと呼ばれていました。

編集：ドキュメントをざっと見た後、v6ではformValueSelectorを使用する必要があるようです： http://redux-form.com/6.0.0-rc.3/examples/selectioningFormValues /

7
tmaximini

formValueSelector() は必要ありません。

プロパティとして直接アクセスすることもできます。

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

と同じ

List = connect(
  state => ({
    formValues: {
       id: formValueSelector('formName')(state, 'id')
    }
  })
)(List)
3
Julha

私も同じ問題を抱えていました。どうやら、 'values'はredux形式で保存された名前です。 Iurii Budnikov アドバイスを使用して問題を解決できました-接続呼び出しで変数名を「values」から別の名前に変更するだけです。

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

Redux-form _6.0.0_から始めて（そして_7.0.0_でも同じ）、関数formValueSelector()を使用して、アプリケーションにある任意のreduxフォームから値を選択できます。 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)
_
0
Tom Van Rompaey