mapStateToPropsとReduxフォームをエクスポートするには？

Question

ログインページにReduxフォーム（バージョン6）を使用しています。私がしたいのは、ユーザーがフォームを記入して送信をクリックし、私の状態からテキストを取得し、最終的にその電子メールとパスワードでアクションを送信できるようにする場合です。しかし、私はreact-reduxとRedux Formからの接続の両方を使用している間、このコンポーネントをエクスポートすることに問題があります。反応-Reduxのを使用して

、接続はとても小道具に状態をマッピングするときのようにエクスポートすることを希望する：

輸出デフォルト接続（mapStateToProps）（LogInForm）

しかし、Reduxのフォームは、それが輸出のように設定しています望んでいます：

export default reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

これらの2つを組み合わせる方法はありますか？私は次のようなものを試しました：

const reduxFormConfig = reduxForm({ 
    form: 'LogInForm', 
    validate, 
}); 

export default connect(mapStateToProps)(ReduxFormConfig)(LogInForm) 

しかし、うまくいきませんでした。

これは、これを処理するためのより良いアプローチですか？私のコンポーネント内の完全なコードは次のとおりです。

import React from 'react'; 
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import InputField from '../InputField'; 
import { validateLogInSignUp as validate } from '../../utils/validateForms.js'; 

const LogInForm = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    submitting, 
    } = props; 

    return (
    <div> 
     <form onSubmit={handleSubmit}> 
     <Field 
      name="email" 
      type="email" 
      component={InputField} 
      label="email" 
     /> 
     <Field 
      name="password" 
      type="password" 
      component={InputField} 
      label="password" 
     /> 
     <div> 
      <button type="submit" disabled={submitting}>Submit</button> 
     </div> 
     </form> 
    </div> 
); 
}; 

const mapStateToProps = state => { 
    return { 
    loginInput: state.form, 
    }; 
}; 

// export default connect(mapStateToProps)(LogInForm) 

// export default reduxForm({ 
// form: 'LogInForm', 
// validate, 
// })(LogInForm); 

すべてのヘルプは大歓迎です。ありがとう！

Answer 1

redux-formを使用すると、LoginFormの状態に直接アクセスする必要はありません。シンプルな形のより完全な例を参照してくださいhttps://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42

// LoginForm.js 
const LogInForm = (props) => { 
    ... 
}; 

export default reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 


// Parent.js 
import LoginForm from './LoginForm'; 

const handleSubmit = (values) => { 
    alert(JSON.stringify(values)); // { email: 'foo@bar.com', password: '1forest1' } 
}; 

const Parent = (props) => { 
    return (
    <LoginForm onSubmit={ handleSubmit } /> 
); 
}; 

：代わりに、フォームが送信され、あなたの親コンポーネントの値にアクセスする必要があります。まだ

Answer 2

ありreduxFormのV6でこれらの2を結合する方法：同じ問題で複数のスレッドがあります

import React, { Component } from 'react'; 
import { connect } from 'react-redux 

class LogInForm extends Component { 
    ... 
} 

function mapStateToProps(state) { 
    return { ... } 
} 

function mapDispatchToProps(dispatch) { 
    return { ... } 
} 

// First decorate your component with reduxForm 
LogInForm = reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

// Then connect the whole with the redux store 
export default connect(mapStateToProps, maDispatchToProps)(LogInForm) 

Answer 3

：ここ

reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

export default connect(mapStateToProps)(LogInForm) 

はどのようにあります。 I recently posted my take with my solution hereですが、いくつかのバリエーションがあります。

1. 私は関数ベースのクラスベースのコンポーネントを使用しました。私は、具体的にその方法を実装し、react-reduxのconnectメソッドが高次のコンポーネントになることを説明するガイドを見つけました。クラスインスタンスで最もよく使用されます。

2. は@doncredas、reduxForm言及と反応-Reduxのの接続方法は、別々に実装されなければならないように、しかし、私の実装では、以下の通りである：

   function mapStateToProps(state) { 
       return { form: state.form }; 
   } 
   
   Signin = connect(mapStateToProps, actions)(Signin); 
   Signin = reduxForm({ 
   form: 'signin' 
   })(Signin); 
   export default Signin; 
   

別変動はあってもよい[後で追加します]：

const form = reduxForm({ form: 'signin' }); 
export default connect(mapStateToProps, actions)(form(Signin)); 

Answer 4

あなたはこれを試すことができます。

import React from 'react'; 
import { connect } from 'react-redux' ; 
import { reduxForm } from 'redux-form'; 

class Example extends React.Component { 
    ... 
} 

function mapStateToProps(state) { 
    return { ... } 
} 

function mapDispatchToProps(dispatch) { 
    return { ... } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({ 
     form: 'formname', 
     validate 
})(Example));