アクションにJSのパスオブジェクトを返す

Question

私はそれにバリデーションのあるフォームを持っていて、それがオブジェクト "フィールド"を作成した後です。このオブジェクトをアクション "createPost"にどのように渡すことができますか？私は "小道具"で何かをする必要があると思いますか？それともディスパッチャーラインと関係があると思いますか？

import React, { Component } from 'react'; 
import Header from '../components/header'; 
import Formous from 'formous'; 
import { createPost } from '../actions/index'; 

class ErrorText extends Component { 
    render() { 
    return <div style={{ color: '#f00' }}> 
     {this.props.errorText} 
    </div> 
    } 
} 

class MyComponent extends Component { 
    componentWillReceiveProps(nextProps) { 
    // Set default form values (might be appropriate in a different method 
    this.props.setDefaultValues({ 
     age: 33, 
     name: 'Sir Andrew', 
    }); 
    } 

    handleSubmit(formStatus, fields) { 
    if (!formStatus.touched) { 
     alert('Please fill out the form.'); 
     return; 
    } 

    if (!formStatus.valid) { 
     alert('Please address the errors in the form.'); 
     return; 
    } 

    // All good! Do something with fields.name.value and fields.age.value 
    console.log(formStatus, fields); 
    } 

    render() { 
    const { 
     fields: { age, name }, 
     formSubmit, 
    } = this.props; 

    return <div> 
    <Header /> 
     <form onSubmit={formSubmit(this.handleSubmit)}> 
     <div> 
      <input 
      placeholder="Name" 
      type="text" 
      value={name.value} 
      { ...name.events } 
      /> 
      <ErrorText { ...name.failProps } /> 
     </div> 
     <div> 
      <input 
      placeholder="Age" 
      type="text" 
      value={age.value} 
      { ...age.events } 
      /> 
      <ErrorText { ...age.failProps } /> 
     </div> 
     <div> 
      <button type="submit">Submit</button> 
     </div> 
     </form> 
    </div> 
    } 
} 

const formousOptions = { 
    fields: { 
    name: { 
     tests: [ 
     { 
      critical: true, 
      failProps: { 
      errorText: 'Name is required.', 
      }, 
      test(value) { 
      return value !== ''; 
      }, 
     } 
     ], 
    }, 

    age: { 
     tests: [ 
     { 
      critical: true, 
      failProps: { 
      errorText: 'Age should be a number.', 
      }, 
      test(value) { 
      return /^\d*$/.test(value); 
      }, 
     }, 
     { 
      critical: false, 
      failProps: { 
      errorText: 'Are you sure you\'re that old? :o', 
      }, 
      test(value) { 
      return +value < 120; 
      }, 
     }, 
     ], 
    }, 
    }, 
}; 

export default Formous(formousOptions)(MyComponent) 

Answer 1

小道を介してreduxアクションを送信します。

this.props.onMySubmit({ 
    name: fields.name.value, 
    age: fields.age.value 
}); 

還元反応アクションコネクタ（onMySubmit）は、アクション（アクションタイプと引数）をストアにディスパッチします。これは、店舗の状態を変更するためにレデューサーによって処理されます。