reactjs – 如何从Child组件调度动作三级？

我目前正在面对设计一个React应用程序的这个问题,而我似乎无法找到答案.

因此,我的应用程序具有以下反应路由器中组件的历史

应用
– > DynamicContainer
– > – > LoginComponent

现在,LoginComponents具有使用用户名和密码的表单元素.

我有userActionCreators处理登录名,并且在完成时调度登录成功,但我似乎找不到正确的方法来连接我的LoginComponent来调度操作或调用actionCreators.

我该怎么做？任何建议将不胜感激.

一个选项是通过连接将单一用途表单绑定到其操作.由于< LoginComponent />通常总是做同样的事情,你可以这样使用：

import React from 'react';
import * as userActionCreators from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     login: React.PropTypes.func.isrequired
   }

   render() { 
     const { login } = this.props;
     const { username,password } = this.state;

     return (
       <form onSubmit={ () => login(username,password) }>
         ...
       </form>
     );
   }
}

export default connect(null,userActionCreators)(LoginComponent);

连接自动绑定动作创建者并单独提供派驻到道具,所以如果你想更加明确,上面的例子是相同的

import React from 'react';
import { login } from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     dispatch: React.PropTypes.func.isrequired
   }

   render() { 
     const { login,dispatch } = this.props;
     const { username,password } = this.state;

     return (
       <form onSubmit={ () => dispatch(login(username,password)) }>
         ...
       </form>
     );
   }
}

export default connect()(LoginComponent);

并作为参考,userActionCreators：

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_Failed = 'LOGIN_Failed';

export function login(username,password) {
  if (username === 'realUser' && password === 'secretPassword') {
    return { type: LOGIN_SUCCESS,payload: { name: 'Joe',username: 'realUser' } };
  } else {
    return { type: LOGIN_Failed,error: 'Invalid username or password };
  }
}

reactjs – 如何从Child组件调度动作三级？

猜你在找的React相关文章