redux-formsからのディスパッチを使用したAPI呼び出しの分離 "onSubmit"

Question

ドキュメントが示唆するように私はredux-formを統合しました。 次のステップとして、私のアプリケーションに非同期APIコールを追加し、redux-formによって作成されたフォームとそれらを結合したいと考えました。

いつものように、私はアプリケーションロジックから私のUIコンポーネントを分離したいと思います。これを行うための還元方法は、コンポーネント内のアクションをディスパッチし、リデューサ内で必要なロジックを実行することです。あなたのactions/actionCreators内で非同期操作が必要な場合は、redux-thunkを使用するか、おそらくredux-sagaのような他のライブラリを使用します。

redux-thunkを使用して、自分のアプリケーションの状態を更新するために私のactionCreators内で非同期API呼び出しを使用するとします。質問は今、redux-formが私たちにonSubmitの機能を与えるという論理とこれをどのように組み合わせるのでしょうか？この関数は、フォームの状態を処理する約束を返すと仮定し、これを通常のアクションの使用方法と組み合わせる方法を見つけることができません。

redux-formは、アクションを使用してサブミット関数を処理する還元方法を提供していませんか？

何か不明な点がある場合や、私が何をしたいのかをより明確にするためにコードが必要な場合は、お気軽にお問い合わせください。ありがとう！

Answer 1

Redux-formを使用すると、別の場所で使用できる送信ハンドラプロパティを渡すことができます。

可能なアプローチ。

あなた親コンポーネント：

class FormHandler extends Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(data) { 
    return this.props.asyncAction(data).then(() => { 
     throw new SubmissionError({ user: 'Username already taken.', _error: 'Form submission failed' }); 
    } 
    } 
    render() { 
    return <MyForm onSubmit={this.handleSubmit} /> 
    } 
} 

export default connect(mapStateToProps, { asyncAction })(FormHandler); 

普段Reduxのフォームなしで行うのと同じようあなたは、あなたの親コンポーネントを接続することができ、かつhandleSubmitは、お店に接続されているアクションすることができます。

詳細については、Redux form official documentationをご覧ください。

あなたReduxのフォームMyForm：

class MyForm extends Component { 
    render() { 
    const { error, handleSubmit, onSubmit, submitting } = this.props; 

    return (
     <form onSubmit={handleSubmit(onSubmit)}> 
      ... fields ... 
      <button type="submit" disabled={submitting}>Create</button> 
     </form> 
    ); 
    } 
} 

MyForm.PropTypes = { 
    onSubmit: PropTypes.func.isRequired 
}; 

export default reduxForm({ 
    form: 'myForm', 
})(MyForm);