14

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

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

App -> DynamicContainer -> -> LoginComponent

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

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

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

4

3 回答 3

16

一种选择是将您的单一用途表单绑定到它们的操作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自动绑定动作创建者并单独提供dispatchto 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-21T16:58:34.437 回答
7

如果我理解正确，如果您阅读示例：待办事项列表 | Redux你会找到你可能正在寻找的例子。

有App组件，connect()ed到 Redux，然后是其他组件：AddTodo、TodoList、Todo和Footer。

应用程序调用TodoList调用Todo用户可以点击的地方。这个点击会在回调之后冲浪回来回调，从Todo到TodoList到App，具体如下：

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

  2. TodoList调用Todo _ <Todo {...todo} key={index} onClick={ () => this.props.onTodoClick(index) } />

  3. Todo组件具有<li>withonClick={this.props.onClick}属性。

因此，向后，当有人在Todo组件内单击时，this.props.onClick它将调用this.props.onTodoClick(index)将从TodoList调用的哪一个（注意可选添加的参数index），然后，最后，这dispatch(completeTodo(index))将从App调用该函数。

于 2015-12-16T22:17:21.407 回答
1

两种选择：

  1. 通过对象将绑定的 actionCreator 从您的 Container（连接到 Redux）传递到子组件（未连接到 Redux）props。

  2. 考虑在您的项目中采用React 组件上下文。

于 2015-10-20T18:49:11.180 回答