2017-09-06 9 views
2

誰かが、以下のコードがmySubmitActionアクション作成者にアクセスできない理由を説明できますか? mapDispatchToProps()? handleSubmit()はreduxForm()デコレータのプロップとして提供されていますが、カスタムアクション作成者はどこに渡されますか?mapDispatchToPropsなしでアクションクリエイターに電話することができますか?

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { connect } from 'react-redux'; 
import * as Actions from '../actions'; 

const validate = values => { 
    const errors = {}; 
    if (!values.title) { 
     errors.title = "Please enter a title" 
    } 

    return errors; 
}; 

class myForm extends Component { 
    handleFormSubmit = (values) => { 
     this.props.mySubmitAction(values); 
    }; 

    render() { 
     return (
      isOpen={ this.props.modalIsOpen } 
      onRequestClose={() => this.props.onRequestClose() }> 

      <form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}> 
       <input name="title" className="form-control" type="text" /> 
       <button action="submit" className="btn btn-primary">Submit</button> 
      </form> 
     ) 
    } 
} 

const createReduxForm = reduxForm({form: 'myForm', validate}); 
export default connect(null, Actions)(createReduxForm(SessionForm)); 

答えて

1

あなたimport * as Actions from '../actionsActionsは、あなたのアクション名とアクションクリエイターのオブジェクトマッピングです。オブジェクトをmapDispatchToPropsパラメータとして渡すと、connectはデフォルトで各アクション作成者をdispatch呼び出しにラップします。 (オブジェクトまたは関数):オブジェクトが渡された場合、その内部の各機能は、Reduxのアクションの作成者であると仮定される。

react-redux connect API

[dispatchProps mapDispatchToProps(ディスパッチ、[ownProps])]参照します。同じファンクション名を持ち、すべてのアクション作成者がディスパッチコールにラップされて直接呼び出されるオブジェクトは、コンポーネントの小道具にマージされます。

+0

ok私は理解していると思います。しかし、なぜ私はconnect()に直接アクションオブジェクトを渡すことができるときにmapDispatchToPropsを使うのですか? – orikon

+0

場合によっては、アクションクリエータのサブセットをコンポーネントに公開したり、アクションクリエータにデフォルト引数を挿入したり、アクションクリエータを条件付きで選択したりすることができます。その考え方は、ロジックをコンポーネントに置くのではなく、mapDispatchToPropsのアクションをカプセル化できるということです。 –

関連する問題