Axios 不向 rootSaga 返回数据

Question

所以我正在学习 Redux Saga 并使用 Axios 进行 API 调用。即使您不了解 Redux Saga，但您了解 Axios，您仍然可以提供帮助！

这是我的 rootSaga 的代码，它获取我的操作并调用 getBlogsSaga。

import {takeEvery, call, put, select} from 'redux-saga/effects'
import {BLOGS} from '../store/actions/constants'
import {getBlogsSaga} from './getBlogsSaga'
import {setBlogs} from '../store/actions/blogActions'

function* displayBlogs() {
    const blogs = yield call(getBlogsSaga);
    console.log(yield call(getBlogsSaga))
    yield put(setBlogs(blogs))
}
//watcher saga
function* rootSaga() {
    yield takeEvery(BLOGS.LOAD, displayBlogs)
}

export default rootSaga;

这是 axios 调用，它在我 console.log 时会返回数据。

import axios from 'axios'
const API_URL = "http://localhost:3004/blogs/";

const getBlogsSaga = async () => {
    await axios
  .get(API_URL)
  .then(function (response) {
    const data = response.data;
    console.log(data)
    return data;
  })
  .catch(function (error) {
    console.log(error);
 });
}

export {getBlogsSaga}

最后，这里有一个 console.log 来说明我的意思。 rootSaga 请求数据但从未收到数据，即使 axios 成功交付它。

getBlogsSaga.js:11 (3) [{…}, {…}, {…}]
rootSaga.js:8 undefined

Answer 1

saga 的call 实际上可以很好地处理承诺，所以让你的 axios 代码像这样应该可以正常工作。无需在这里等待，您可以在生成器中完成等待的繁重工作

import axios from 'axios'
const API_URL = "http://localhost:3004/blogs/";

const getBlogsSaga = () => {
  return axios
  .get(API_URL)
  .then(function (response) {
    const data = response.data;
    console.log(data)
    return data;
  })
  .catch(function (error) {
    console.log(error);
 });
}

export {getBlogsSaga}

我在这里做了一个简单的 poc :) https://jsfiddle.net/vqoktfwd/1/