cannot get a promise after bindActionCreators in Redux - promise

Question

I use react/redux to create an app.
I've a custom action creator to make an async request (I use 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 my component, I use bindActionCreators to bind this method with dispatch :
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>
);
}
}
I would like to apply 'then' to my action creator already bound to dispatch.
Thanks

Answer 1

You need to return fetch() inside your arrow function inside loginAttempt. Like so:
export function loginAttempt(userData) {
return dispatch => {
return fetch('https://api.t411.ch/auth', {
method: 'POST',
body: formData
}).then(...);
}
Basically when you call your binded action creator the arrow functions gets executed but it doesn't have a return value.

Answer 2

For me, I'm doing all the logic inside the dispatcher, so I passed to it a done callback.
In my component, I'm calling the action login as follow
login(values, setErrors, (user) => {
console.log('done:', user)
})
then on my action, I do all the async calls, then call done(data) at the end
export const login = (form: ILoginForm, setErrors, done) => {
return async (dispatch: Dispatch<Action>) => {
// ....
done(data)
}