从组件触发时未正确返回操作

Question

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

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

我犯了一个愚蠢的错误吗？我所有的其他组件都可以正常工作。我正在使用反应版本。 15.1

动作

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 **-----------------

组件

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

不是。

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

希望你能找到它！