reactjs - 如何从三个级别的子组件中分派(dispatch) Action ？

我目前在设计React应用程序时遇到这个问题，但似乎无法找到答案。

所以我的应用程序遵循了React Router中组件的层次结构

应用程式
->动态容器
->-> LoginComponent

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

我有用于处理登录名的userActionCreators，完成后它成功分派了登录名，但是我似乎找不到正确的方法来将LoginComponent连接到分派动作或调用actionCreators。

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

最佳答案

一种选择是使用connect将您的单一用途表单绑定到其动作。由于<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);

connect自动绑定动作创建者，并单独为dispatch提供props，因此，如果您想更加明确，上面的示例与

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 - 如何从三个级别的子组件中分派(dispatch) Action ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33244324/