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

Posted 2023-02-22

【中文标题】从组件触发时未正确返回操作

【英文标题】：Action not being returned properly when triggered from Component

【发布时间】：2017-03-06 11:43:11

【问题描述】：

由于某些奇怪的原因，当我尝试从我的组件触发它时，动作创建者没有被正确调用。我正在尝试返回另一个函数来分派给我的减速器，这是 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_URLsignin`, 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);

【参考方案1】：

通常当我有这样的断开连接时，当我说一般时我的意思是 200% 的时候，这是因为某些东西拼写错误或丢失。我注意到你的行为：

UTH_USER, ROOT_AUTH_URL

正在使用中，但是

 UNAUTH_USER, AUTH_ERROR

不是。

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

希望你能找到它！

【讨论】：

我想通了。它与 redux-thunk 在调用时没有调用第 10 行的调度函数有关。它之前调用过它，但我用更新的 redux-form 版本更新了我的组件，我猜它以某种方式影响了 redux thunk 如何调用返回的函数。在修复中，我只需解决操作文件中的承诺并返回一个带有状态和数据的对象。

所以我基本上返回一个已经检索到数据的对象，而不是返回一个在这种情况下由于某种原因应该调用（但没有）thunk的方法。