'Redux-Saga' funktioniert nicht asynchron

Question

Ich versuche (lernen), eine asynchrone Post Anfrage mit Redux-Saga zu machen, aber ich bekomme ein synchrones Verhalten.

dies ist der Code ich verwende:

import {AUTH_REQUEST} from '../constants/authentication'; 
import {authSuccess, authError} from '../actions/login'; 
import {takeEvery, call, put, fork, all} from 'redux-saga/effects'; 
import axios from 'axios'; 

const authenticate = (username, password) => { 
    axios 
     .post('http://localhost:8000/api/auth/login/', {username, password}) 
     .then((response) => { 
      console.log('RESPONSE: ', response.data); 
      return response.data; 
     }) 
     .catch((error) => { 
      throw error; 
     }); 
}; 

function* watchAuthRequest({username, password, resolve, reject}) { 
    try { 
     const result = yield call(authenticate, username, password); 
     console.log('RESULT', result); 
     yield put(authSuccess(result)); 
     yield call(resolve); 
    } catch (error) { 
     yield put(authError(error)); 
     yield call(reject, {serverError: 'Something bad happend !'}); 
    } 
} 

const authSaga = function* authSaga() { 
    yield takeEvery(AUTH_REQUEST, watchAuthRequest); 
}; 

export default function* rootSaga() { 
    yield all([ 
     fork(authSaga), 
    ]); 
}; 

und wenn ich das Formular abzuschicken (ich verwende redux-Form), das ist, warum ich in meiner Konsolenprotokolle erhalten:

RESULT: undefined 
RESPONSE: Object {user: Object, token: "04a06266803c826ac3af3ffb65e0762ce909b07b2373c83b5a25f24611675e00"} 

und sogar die authSuccess Aktion wird mit einer leeren Nutzlast (result)

ich falsch hier etwas zu tun, bin geschickt bekommen?

Answer 1

Sie verpassen eine return:

const authenticate = (username, password) => { 
    return axios 
     .post('http://localhost:8000/api/auth/login/', {username, password}) 
     .then((response) => { 
      console.log('RESPONSE: ', response.data); 
      return response.data; 
     }) 
     .catch((error) => { 
      throw error; 
     }); 
};