1

我正在编写一个带有 redux 和 redux-actions 的 ReactJS 应用程序。我想在有效负载中创建一个带有登录详细信息的 redux-action，如下所示：

{
   type: 'AUTH_REQUEST',
   payload: { login: 'Foo', password: 'bar' },
}

...但我所有的尝试都没有成功。

根据文档，应该有一种方法可以在有效负载中添加数据，但我对前端堆栈的熟练程度不足以真正理解。

这是我到目前为止所拥有的：

动作.js

import { createAction } from 'redux-actions';

export const AUTH_REQUEST = 'AUTH_REQUEST'

export const authRequest = createAction(AUTH_REQUEST);

loginFormContainer.js

const mapStateToProps = state => ({
    isLoggedIn: state.authentication.isLoggedIn
})

const mapDispatchToProps = dispatch => ({
    authRequest: () => dispatch(authRequest())
})

export const LoginFormContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(LoginForm)

loginForm.js

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      errors: {email: '', password: ''},
      emailValid: false,
      passwordValid: false,
      formValid: false
    };
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

 handleSubmit(event) {
    event.preventDefault();
    this.props.authRequest();
  }

我相信我应该能够在处理提交时提供存储在 loginForm 状态中的电子邮件和密码，但我不知道该怎么做......（是的，我是 js 新手）。任何人都可以帮我解决这个问题吗？

4

1 回答 1

2

动作.js

const authRequest = createAction(AUTH_REQUEST, (login, password) => ({ login, password }));

loginFormContainer.js

const mapDispatchToProps = dispatch => ({
    authRequest: (...args) => dispatch(authRequest(...args))
})

loginForm.js

handleSubmit(event) {
    event.preventDefault();
    const { email, password } = this.state;
    this.props.authRequest(email, password);
}
于 2019-04-26T14:36:09.960 回答