如何从子组件三​​层下调动作？

Question

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

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

App - > DynamicContainer - > - > LoginComponent

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

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

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

Answer 1

一种选择是将您的单一用途表单与其操作绑定在一起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 };
  }
}

Answer 2

如果我理解正确,如果您阅读示例:Todo List | Redux你会找到你可能正在寻找的例子.

有App组件,connect()编辑到Redux,然后还有其他组件:AddTodo,TodoList,Todo和Footer.

应用程序调用TodoList调用Todo,用户可以在其中单击某些内容.此次点击将在回调后回溯,从Todo到TodoList再到App,详情如下:

1. 应用程序调用TodoList的用 <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />

2. TodoList的电话待办事项与 <Todo {...todo} key={index} onClick={ () => this.props.onTodoClick(index) } />

3. 藤组件具有<li>与onClick={this.props.onClick}财产.

因此,向后,当某人里面点击待办事项成分,它,将调用this.props.onClick将调用this.props.onTodoClick(index)来自TodoList的(注意,可选添加的参数指标),那么,最后,这将调用函数dispatch(completeTodo(index))的应用程序.