Question

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

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

应用 - ＆GT; DynamicContainer - ＆GT; - ＆GT; 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

如果我理解正确，如果您阅读Example: Todo List | Redux，您将找到您可能正在寻找的示例。

App 组件， connect（）ed 到Redux，然后是其他组件： AddTodo ， TodoList ， Todo 和页脚。

应用调用 TodoList ，调用 Todo ，用户可以点击该内容。此次点击将在回调后回传回调，从 Todo 到 TodoList 再到应用，详情如下：

应用调用 TodoList <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />
TodoList 调用 Todo <Todo {...todo} key={index} onClick={ () => this.props.onTodoClick(index) } />
Todo 组件的<li>属性为onClick={this.props.onClick}。

所以，向后，当有人点击 Todo 组件内部时，会调用this.props.onClick，它会从 TodoList 调用this.props.onTodoClick(index)（注意可选添加参数 index ），最后，这将从 App 调用函数dispatch(completeTodo(index))。

Answer 3

两个选项：

通过props对象将绑定的actionCreator从您的Container（连接到Redux）传递到子组件（未连接到Redux）。
考虑在项目中使用React Component Context。

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

3 个答案:

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

3 个答案:

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