Question

由于某些奇怪的原因，当我尝试从我的组件触发时，动作创建者没有被正确调用。我正在尝试返回另一个函数来发送到我的reducer，这是redux-thunk的标准。但是，我无法退货。

组件正在触发'signinUser'操作功能，console.log显示电子邮件和密码值（操作文件的第7行），然后它会跳过返回代码（第8行和在行动档案中。

我正在犯一个愚蠢的错误吗？我所有其他组件都运行正常。我正在使用反应版。 15.1

ACTION

import axios from 'axios';
import {browserHistory} from 'react-router';
import {AUTH_USER, UNAUTH_USER, AUTH_ERROR, ROOT_AUTH_URL} from '../constants/auth.constants';

export function signinUser({email, password}) {

  console.log('email and password in action', email, password); 

---- ^^^ THIS CONSOLE PART WORKS.
**---- THE RETURN FUNCTION below is not working... BELOW CODE IS NOT RENDERING ANYTHING.**-------

  return dispatch => {
console.log('pass the return'); ------> does not work :-(
    // Submit email/password to the server
axios.post(`${ROOT_AUTH_URL}signin`, {email, password})
.then(response => {
  console.log('response', response);
  // - Update state to indicate user is authenticated: flag will turn to "true"
      dispatch({type: AUTH_USER});
      // - Save the JWT token in local storage
      localStorage.setItem('token', response.data.token);

      // - redirect to the route '/feature'
      browserHistory.push('/');
    })
    .catch(() => {
                    // if request is bad...
                    // - Show an error to the user
      dispatch(authError('Bad Login Info!'));
    });
  }
}
**---- ABOVE RETURN STATEMENT DOES NOT WORK **-----------------

COMPONENT

import React, {Component, PropTypes} from 'react';
import {reduxForm, Field} from 'redux-form';
import {signinUser} from '../../actions/auth.actions';

class Signin extends Component {
    // used to take supplied inputs and check auth
  handleFormSubmit({email, password}) {
        // Need something to log user in
    console.log('test', email, password);

    signinUser({email, password});
    **^^^^^ THIS PART is TRIGERRING THE ACTION**
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
        );
    }
  }

  render() {
    // handleSubmit is a built in redux-form helper to bind ui to values
    const {handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <fieldset className="form-group">
          <label>Email:</label>
          <Field name="email" component="input" type="text" required className="form-control"/>
        </fieldset>
        <fieldset className="form-group">
          <label>Password:</label>
          <Field name="password" component="input" type="password" required className="form-control"/>
        </fieldset>
        {this.renderAlert()}
        <button action="submit" className="btn btn-primary">Sign in</button>
      </form>
    );
  }
}

Signin.propTypes = {
  signinUser: PropTypes.func,
  errorMessage: PropTypes.string,
  handleSubmit: PropTypes.func
};

function mapStateToProps(state) {
  return {errorMessage: state.auth.error};
}

export default reduxForm({
  form: 'signin'
}, mapStateToProps, signinUser)(Signin);

Answer 1

一般情况下，当我这样断开连接时，一般来说我的意思是200％的时间，这是因为某些内容拼写错误或丢失。我注意到你的行动：

UTH_USER, ROOT_AUTH_URL

正在使用中，但

 UNAUTH_USER, AUTH_ERROR

不是。

在不道德或错误的情况下，我不确定这会做什么。检查浏览器devtools的网络选项卡以查找错误，console.log在其他地方查找并检查拼写。

我希望你能找到它！

从Component触发时，操作无法正确返回

1 个答案: