派遣アクションの作成者の構文は反応し、Reduxの

Question

を私はyoutube.iに、次のチュートリアルで混乱してい

import axios from 'axios' 

export default (userdata) => { 
    return dispatch => { 
     return axios.post('/api/users', userdata); 
    } 
} 

、mapDispatchtoPropsにオブジェクトと以下のような関数として2つの関数を渡すと、これは第二の機能またはアクションの作成者であります、

import {ADD_FLASH_MESSAGE} from './types' 

    export function addFlashMessage(message) 
    { 
     return{ 
      type:ADD_FLASH_MESSAGE, 
      message 
     } 
    } 

とは、今私は、このファイルでそれらの両方を渡す

import React from 'react' 
import SignupForm from '../signup/SignupForm' 
import {connect} from 'react-redux' 
import signupRequest from './signupRequest' 
import {addFlashMessage} from '../../actions/addFlashMessage' 

class Signup extends React.Component { 
    render() { 
     const {signupRequest,addFlashMessage} = this.props; 

     return (
      <div className="row"> 
      <div className="col-md-4 col-md-offset-4"> 
      <SignupForm signupRequest={signupRequest} addFlashMessage={addFlashMessage}/> 
      </div> 
      </div> 
      ) 
    } 
} 

Signup.propTypes = { 
    signupRequest: React.PropTypes.func.isRequired, 
    addFlashMessage:React.PropTypes.func.isRequired 
} 

export default connect(null, {signupRequest,addFlashMessage})(Signup) 

と私はそれらを使用するプレゼンテーションコンポーネント、

import React from 'react' 
import classname from 'classnames' 
import {browserHistory} from 'react-router' 
import validateInput from '../../../server/shared/validateInput' 
import TextFieldGroup from '../fieldgroup/textFieldGroup' 

export default class SignupForm extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state ={ 
      username: "", 
      password: "", 
      passwordConfirmation: "", 
      email: "", 
      errors:{}, 
      isLoading:false 
     } 
    } 
    onChange(e){ 
     this.setState(
     { 
      [e.target.name] : e.target.value 

     }) 
    } 

    isValid(){ 
     const {errors,isValid} =validateInput(this.state) 
     if(!isValid){ 
      this.setState({errors}); 
     } 
     return isValid; 
    } 

    onSubmit(e){ 
     e.preventDefault(); 
     if(this.isValid()){ 
      this.setState({ 
       errors:{}, 
       isLoading:true 
      }); 
      this.props.signupRequest(this.state).then(
       () => { 
        this.props.addFlashMessage({ 
         type:'success', 
         text:'Sign up successfull, Welcome aboard!' 
        }); 
        browserHistory.push('/'); 
       }, ({data}) => this.setState({errors:data,isLoading:false})); 
     } 
    } 

    render(){ 
     const {errors} = this.state; 
     return (
      <form onSubmit={this.onSubmit.bind(this)}> 
      <h1>Sign Up For Free</h1> 
      <TextFieldGroup 
      error={errors.username} 
      label="Username" 
      value={this.state.username} 
      onChange={this.onChange.bind(this)} 
      field="username" 
      /> 
      <TextFieldGroup 
      error={errors.email} label="Email" 
      value={this.state.email} onChange={this.onChange.bind(this)} 
      field="email" 
      /> 
      <TextFieldGroup 
      error={errors.password} label="Password" 
      value={this.state.password} onChange={this.onChange.bind(this)} 
      field="password" type="password"/> 
      <TextFieldGroup 
      error={errors.passwordConfirmation} label="Password Confirmation" 
      value={this.state.passwordConfirmation} onChange={this.onChange.bind(this)} 
      field="passwordConfirmation" type="password" /> 
      <div className="form-group"> 
      <button disabled={this.state.isLoading} className="btn btn-primary btn-lg"> 
      Sign Up 
      </button> 
      </div> 
      </form> 
      ) 
    } 

} 

SignupForm.propTypes = { 
    signupRequest: React.PropTypes.func.isRequired, 
    addFlashMessage: React.PropTypes.func.isRequired 
} 

に私は店で状態を通知したり、更新させるために学んだから、まだ新しい中イムは特にReduxの反応、それが機能を提出でどのように機能するかそれを得るいけません私たちは派遣して行動しなければならないので、私の頭の中で私はこのようなものを描きます。

ディスパッチ（this.props.addFlashMessage（{action}）

this.props.signuprequest(this.state)は、ディスパッチ付きの関数をパラメータとして返すだけで、どのようにしてthis.props.addflashmessageをディスパッチでき、API呼び出し結果を返すことができます。

this.props.signupRequest(this.state).then(
       () => { 
        this.props.addFlashMessage({ 
         type:'success', 
         text:'Sign up successfull, Welcome aboard!' 
        }); 
        browserHistory.push('/'); 
       }, ({data}) => this.setState({errors:data,isLoading:false})); 

Answer 1

というだけの理由：

import {connect} from 'react-redux' 

この行が何、あなたがdispatchで渡され、それらを自動的に送出するすべてのアクションをラップしています。より深い理解のための公式ドキュメントを確認してください：あなたはmannaullyそれらを派遣する必要はありませんので、この場合はhttp://redux.js.org/docs/basics/UsageWithReact.html

を、あなたは、Signup.jsxに

export default connect(null, {signupRequest,addFlashMessage})(Signup) 

を行っています。

Answer 2

Stableyが言ったことはまったく正しいものです。私はちょうど詳細を追加したい。基本的に、connectはHOCです。これは、コンポーネントに多くの機能を追加することです。

マジック関数はbindActionCreatorsです。アクション作成者の値を持つオブジェクトを同じキーを持つオブジェクトに変換しますが、すべてのアクション作成者はディスパッチコールにラップされ、直接呼び出すことができます。詳細なドキュメントhere.

wrapActionCreators.js

import { bindActionCreators } from 'redux' 

export default function wrapActionCreators(actionCreators) { 
return dispatch => bindActionCreators(actionCreators, dispatch) 
} 

connect.js

mapDispatch = wrapActionCreators(mapDispatchToProps) 
const mappedDispatch = mapDispatch(store.dispatch, props) 

したがって、connect関数の内部では、渡されたアクションでbindActionCreatorsを呼び出しただけです。