调度动作创建者语法 react-redux

Question

我在下面的教程中感到困惑 youtube.i 将两个函数作为对象传递给 mapDispatchtoProps 和如下函数，

import axios from 'axios'

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

这是第二个函数或动作创建者，

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
}

我不明白它在提交功能中是如何工作的，我在 React 尤其是 Redux 方面仍然是新手，从我学到的为了在商店中通知或更新状态我们必须调度和行动，所以在我的脑海里我想像这样，

dispatch(this.props.addFlashMessage({action})，然后 reducer 完成他的工作。

但是 this.props.addflashmessage 如何才能被调度，而 this.props.signuprequest(this.state) 只能 return 一个以调度作为参数和 return 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 包装您传入的所有操作并自动分派它们。查看官方文档以获得更深入的理解：http://redux.js.org/docs/basics/UsageWithReact.html

在这种情况下，您已经完成了

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

在 Signup.jsx 中，因此您无需手动派遣它们。

Answer 2

Stabley 说的完全正确。我只想添加更多细节。基本上，connect 是一个 HOC，它可以为您的组件添加更多功能。

神奇的函数是 bindActionCreators，它将一个值为 action creators 的对象转换为一个具有相同键的对象，但每个 action creator 都包装在一个调度调用中，因此它们可以被调用 directly.You可以查看更详细的文档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。

调度动作创建者语法 react-redux

dispatching action creator syntax react-redux

javascript

ecmascript-6

reactjs

redux

react-redux