dispatching action creator syntax react-redux
<p>i'm confuse in following tutorial on youtube.i pass two function as object into mapDispatchtoProps and the function like below,</p>

<pre><code>import axios from 'axios'

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

<p>and this is the second function or action creator,</p>

<pre><code>import {ADD_FLASH_MESSAGE} from './types'

    export function addFlashMessage(message)
    {
        return{
            type:ADD_FLASH_MESSAGE,
            message
        }
    }
</code></pre>

<p>and now i pass them both in this file,</p>

<pre><code>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 (
            &lt;div className="row"&gt;
            &lt;div className="col-md-4 col-md-offset-4"&gt;
            &lt;SignupForm signupRequest={signupRequest} addFlashMessage={addFlashMessage}/&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            )
    }
}

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

export default connect(null, {signupRequest,addFlashMessage})(Signup)
</code></pre>

<p>and in the presentation component i use them,</p>

<pre><code>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(
                () =&gt; {
                    this.props.addFlashMessage({
                        type:'success',
                        text:'Sign up successfull, Welcome aboard!'
                    });
                    browserHistory.push('/');
                }, ({data}) =&gt; this.setState({errors:data,isLoading:false}));
        }
    }

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

}

SignupForm.propTypes = {
    signupRequest: React.PropTypes.func.isRequired,
    addFlashMessage: React.PropTypes.func.isRequired
}
</code></pre>

<p>i dont get it how it works in submit function, im still new in react especially redux, from what i learn in order to make inform or update state in store we have to dispatch and action, so in my head i figure something like this,</p>

<p>dispatch(this.props.addFlashMessage({action}), then the reducer do his job.</p>

<p>but how can <code>this.props.addflashmessage</code> can get dispatched while <code>this.props.signuprequest(this.state)</code> only returning a function with dispatch as parameter and return api call result.</p>

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