2017-09-06 1 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 호출로 감쌀 것입니다.

react-redux connect API

참조 [([ownProps, 디스패치) mapDispatchToProps을 : dispatchProps (객체 또는 함수) 오브젝트가 전달되는 경우, 그 안에 각 기능에 돌아 오는 동작 제작자 것으로 가정된다. 동일한 함수 이름을 가진 객체이지만 모든 작업 작성자가 디스패치 호출에 랩핑되어 직접 호출 될 수 있으므로 구성 요소의 하위 항목으로 병합됩니다.

+0

괜찮습니다. 그렇다면 왜 connect() 액션 객체를 전달할 수있을 때 mapDispatchToProps를 사용해야할까요? – orikon

+0

때로는 작업 작성자의 하위 집합을 구성 요소에 표시하거나, 기본 인수를 작업 작성자에게 주입하거나, 조건 작성자가 작업 작성자를 선택하려는 경우가 있습니다. 개념은 구성 요소에 논리를 배치하는 대신 mapDispatchToProps에서 동작을 캡슐화 할 수 있다는 것입니다. –

관련 문제