kann keine Zusage nach bindActionCreators in Redux erhalten

Question

Ich benutze react/redux, um eine App zu erstellen.

Ich habe einen benutzerdefinierten Aktionsersteller, um eine asynchrone Anfrage zu machen (ich benutze 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)); 
    }); 
    } 

In meiner Komponente verwende ich bindActionCreators diese Methode mit Versand zu binden:

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> 
    ); 
    } 
} 

Ich möchte anwenden ‚und dann‘ auf meine Aktion Schöpfer versenden bereits gebunden.

Dank

Answer 1

Sie müssen in Ihrem Pfeil Funktion innerhalb loginAttempt-return fetch(). Wie so:

export function loginAttempt(userData) { 
    return dispatch => { 
    return fetch('https://api.t411.ch/auth', { 
     method: 'POST', 
     body: formData 
    }).then(...); 
    } 

Grundsätzlich, wenn Sie Ihre binded Aktion Schöpfer nennen die Pfeil Funktionen ausgeführt werden, aber es hat keinen Rückgabewert.