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

Question

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) 

コンポーネントはReduxの形式は「形」に搭載され、働いています。 （状態form.formName.valuesから）フォームの値を得るための良い方法と私のディスプレイのコンポーネントに送信します何

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

？私が試してみました

もの：

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

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

  を

Elemの：リストコンポーネント内Reduxの形式により提供getFormValues（ 'formNameフォーム'）関数を使用して、それが機能または未定義を返す

リスト

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

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

私は行方不明のものがあるか、またはそれがredux-formかreduxかにかかわらず、私はまだ正しく理解していません...私は誰かが私を啓発できることを願っています！

ありがとうございました。

Answer 1

ではなく

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

を使用してみてください。少なくともそれはv5でどのように働いたのですか。方法はgetValuesであり、getFormValuesではありませんでした。

編集： それはあなたがformValueSelectorを使用する必要がありますV6に思えるのドキュメントを簡単に見た後：http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

Answer 2

私は同じ問題を抱えていました。どうやら、 '値'は還元型の保存された名前です。私はこの問題を解決するために管理Iurii Budnikovアドバイス使い方 - ちょうどあなたの接続コールで何か他のものに「値」から変数名を変更します。

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

Answer 3

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

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

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

Answer 4

と同じ

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

Reduxのフォーム6.0.0（および7.0.0でも同じ）から始めて、あなたはどのReduxのから値を選択するように機能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)