如何从子组件向下三级调度动作？

我目前正在面对这个问题设计一个React应用程序，我似乎无法找到答案。如何从子组件向下三级调度动作？

所以我的应用程序有以下组件的层次结构中的阵营路由器

应用 - > DynamicContainer - > - > LoginComponent

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

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

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

来源

2015-10-20 Nitesh

一种选择是将您的单用表格与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 }; 
    } 
}

来源

2015-10-21 16:58:34

谢谢！你可以添加回答'userActionCreators'应该是什么样子？ – vitalets

我添加了'userActionsCreators'示例并在'connect'扩展了 –

感谢您的帮助，在中间代码块中，您忘记了从'this.props'中提取'dispatch'。 –

两个选项：

传递从集装箱绑定actionCreator（连接到终极版）下降到子组件（未连接到终极版）通过props对象。
考虑在您的项目中采用React Component Context。

来源

2015-10-20 18:49:11 JonnyReeves

当通过react-router定义heirarchy时，如何通过boundActionCreator将不同的子组件附加到充当占位符的DynamicContainer组件上。我只是在DynamicContainer组件内有{this.props.children}。 – Nitesh

所以你试图通过反应路由器将应用程序根目录中的动作创建者传递给某种类型的登录表单组件？ – ctrlplusb

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

还有的应用组件，连接（）的到终极版，再有就是其他组件：AddTodo，TodoList的，藤和页脚。

应用调用TodoList的调用藤在那里用户可以点击的东西。回调后，该点击将冲浪回来的回调，从的Todo到TodoList的到应用详述如下：

应用调用TodoList的与 <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />
TodoList的致电待办事项与 <Todo {...todo} key={index} onClick={() => this.props.onTodoClick(index) } />
待办事项组分具有<li>与onClick={this.props.onClick}属性。

所以，向后，当藤成分，它里面某人的点击，将调用this.props.onClick它将调用this.props.onTodoClick(index)从TodoList的（注意可选的附加参数指数），然后在最后，这将从App调用功能dispatch(completeTodo(index))。

来源

2015-12-16 22:17:21

如何从子组件向下三级调度动作？

回答

相关问题