使用有效负载创建动作

Question

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

{

   type: 'AUTH_REQUEST',

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

}

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

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

这是我到目前为止的内容：

action.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的新手）。有人可以帮我吗？

Answer 1

action.jsconst authRequest = createAction(AUTH_REQUEST, (login, password) => ({ login, password }));loginFormContainer.jsconst mapDispatchToProps = dispatch => ({    authRequest: (...args) => dispatch(authRequest(...args))})loginForm.jshandleSubmit(event) {    event.preventDefault();    const { email, password } = this.state;    this.props.authRequest(email, password);}