2016-10-24 11 views
0

Для какой-то странной причины действие создателя неправильно вызвано, когда я пытаюсь вызвать его из моего компонента. Я пытаюсь вернуть еще одну функцию для отправки на мои редукторы, как это стандартно с сокращением. Однако я ничего не могу вернуть.Действие не возвращается должным образом при срабатывании с помощью компонента

Компонент запускающего функцию действия «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); 

ответ

0

Вообще, когда у меня есть разъединение, как это, и когда я говорю, как правило, я имею в виду 200% времени, это происходит потому, что-то написано неправильно или отсутствует. Я заметил, что в своем действии:

UTH_USER, ROOT_AUTH_URL 

в использовании, но

UNAUTH_USER, AUTH_ERROR 

нет.

В ситуации unauth или ошибки я не уверен, что это вообще что-то сделает. Проверьте вкладку сети браузера devtools, чтобы найти ошибку, console.log всюду и проверить, что орфография.

Надеюсь, вы найдете его!

+0

Я понял. Это связано с сокращением, не вызывающим функцию отправки в строке 10 при вызове. Он называл это раньше, но я обновил свой компонент с обновленной версией redux-формы, и я предполагаю, что это каким-то образом повлияло на то, как redux thunk вызывает возвращенные функции. В исправлении я просто разрешаю обещание в файле действий и возвращаю объект с состоянием и данными. – andre

+0

, поэтому я в основном возвращаю объект с уже полученными данными вместо того, чтобы возвращать метод, который по какой-то причине предположил, что thunk затем вызывает (но не сделал) в этом случае. – andre

 Смежные вопросы

  • Нет связанных вопросов^_^