2016-07-25 2 views
0

나는 react/redux를 사용하여 응용 프로그램을 만듭니다.는 Redux의 bindActionCreators 이후에 약속을 얻을 수 없습니다

나는 비동기 요청을하는 사용자 지정 작업 작성자가 있습니다 (나는 redux-thunk를 사용합니다). 내 구성 요소에서

export function loginAttempt(userData) { 
    return dispatch => { 

    let formData = new FormData(); 
    formData.append('username', userData.username); 
    formData.append('password', userData.password); 

    fetch('https://api.t411.ch/auth', { 
     method: 'POST', 
     body: formData 
    }).then(response => { 
     if (response.status !== 200) { 
     const error = new Error(response.statusText); 
     error.respone = response; 
     dispatch(loginError(error)); 
     throw error; 
     } 
     return response.json(); 
    }).then(data => { 
     dispatch(loginSuccess(data)); 
    }); 
    } 

, 나는 파견으로이 방법을 바인딩 bindActionCreators를 사용

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 


import SearchBar from './SearchBar'; 
import TorrentLayout from './TorrentLayout'; 

import * as LoginActions from '../actions/login'; // <---- it's where the code above is located 
import * as SearchActions from '../actions/search'; 


function mapStateToProps(state) { 
    return { 
    login: state.login, 
    searching: state.searching 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({...LoginActions, ...SearchActions}, dispatch); 
} 

@connect(mapStateToProps, mapDispatchToProps) 
export default class Home extends Component { 

    constructor(props) { 
    super(props); 

    console.log('should be a promise'); 
    let foobar = this.props.loginAttempt({username: 'username', password:'password'}); 

    console.log(foobar); // <------ undefined 

    // that I want to do 
    this.props.loginAttempt({username: 'username', password:'password'}).then(() => { 
     this.props.search(this.props.login.token, "mysearch"); 
    } 
    } 

    render() { 
    return (
     <div> 
     <div> 
      <SearchBar {...this.props} /> 
      <TorrentLayout {...this.props}/> 
     </div> 
     </div> 
    ); 
    } 
} 

가 이미 파견 수밖에 내 행동 작성자에게 '다음'적용 할 것입니다.

덕분에

답변

1

당신은 loginAttempt 내부 귀하의 화살표 함수 내에서 return fetch()해야합니다. 이렇게 :

기본적으로 바인드 작업 작성자를 호출하면 화살표 기능이 실행되지만 반환 값은 없습니다.