gpt4 book ai didi

reactjs - 如何从三层以下的子组件中调度操作?

转载 作者:行者123 更新时间:2023-12-03 13:15:30 27 4
gpt4 key购买 nike

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

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

应用程序-> 动态容器-> -> 登录组件

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

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

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

最佳答案

一种选择是将您的单一用途表单与其操作绑定(bind) 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自动绑定(bind) Action 创建者并单独提供dispatchprops ,所以如果你想更明确的话,上面的例子是一样的

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 };
}
}

关于reactjs - 如何从三层以下的子组件中调度操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33244324/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com