reactjs - 如何从三层以下的子组件中调度操作？

Question

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

所以我的应用程序在 React Router 中具有以下组件层次结构

应用程序 -> 动态容器 -> -> 登录组件

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

我有 userActionCreators 来处理登录，并在完成后成功调度登录，但我似乎无法找到连接我的 LoginComponent 来调度操作或调用 actionCreators 的正确方法。

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

Answer 1

一种选择是将您的单一用途表单与其操作绑定(bind) 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自动绑定(bind) Action 创建者并单独提供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 };
  }
}