Question

请原谅潜在的noob问题，我是新的反应和反应 - 还原。

我有一个代表当前登录屏幕的组件。它的一个道具是＆＃34; login＆＃34;，一个包含电子邮件和密码的字典。定义组件后，我使用react-redux库将其与商店连接起来，如下所示：

const mapStateToProps = (state) => {
  return {
    rootNav: state.rootNav,
    login: state.login,
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onLoginClick: () => {
      // TODO: actually get the login credentials from the view
      dispatch(actions.submitLogin('testuser', 'testpw'));
      dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV))
    },
    onEmailUpdate: (email) => dispatch(actions.updateEmail(email)),
    onPasswordUpdate: (password) => dispatch(actions.updatePassword(password)),
  };
};

显然，在dispatch(actions.submitLogin('testuser', 'testpw'));行中，我希望将真实的电子邮件和密码作为有效负载提交。但我不明白我应该如何从组件中访问它（即我不能只使用this.props.login）或者我是否应该从商店访问它（我将通过哪里）商店在？）

任何澄清都会非常有帮助！

Answer 1

我认为这可以通过两种方式处理。 mapDispatchToProps作为react-redux连接函数的第二个参数传递。它为连接的组件提供对某些操作创建者的访问权限。在这种情况下，您可以为其创建动作创建者onLoginClick，onEmailUpdate和onPAsswordUpdate。

现在可以通过this.props.onLoginClick，this.props.onEmailUpdate等在您的组件中访问这些功能。一个简单的解决方案是在您的登录按钮上创建onClick事件，或onSubmit登录表单。如果您在redux状态下更新电子邮件和密码并将其作为道具传递给此组件，则可以执行以下操作：

在您的登录类中：

login() {
  // get password and email from the props
  const pw = this.props.password;
  const email = this.props.email;
  // submit login action with email and password
  this.props.onLoginClick(email, password)
}

render() {
  <form onSubmit={this.login.bind(this)}>
      ...
  </form>  
}

并更新mapDispatchToProps以使onLoginClick需要电子邮件和密码。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // update this action creator to take an email and password
    onLoginClick: (email, password) => {
      // TODO: actually get the login credentials from the view
      dispatch(actions.submitLogin(email, password));
      dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV))
    },
    onEmailUpdate: (email) => dispatch(actions.updateEmail(email)),
    onPasswordUpdate: (password) => dispatch(actions.updatePassword(password)),
};

选项2

否则根据这里的react-redux文档https://github.com/reactjs/react-redux/blob/master/docs/api.md，您还可以使用mapDispatchToProps，ownProps的第二个参数。

因此，您可以将onLoginClick更改为：

onLoginClick: () => {
  const email = ownProps.email;
  const password = ownProps.password;

  dispatch(actions.submitLogin(email, password));
  dispatch(actions.changeRootNav(rootNavs.OVERVIEW_NAV))
}

在您的表单上，您可以执行此操作：

render() {
  <form onSubmit={this.props.onLoginClick}>
      ...
  </form>

}

或者如果您希望它仅在按钮上单击...

<button onClick={this.props.onLoginClick}>Login</button>

React-redux在mapDispatchToProps中获取道具或状态

1 个答案: