'yield' 表达式只允许出现在生成器主体中

Question

我正在使用 redux-saga 获取服务器 api 数据。我的问题是我正在尝试设计以下代码。

然而被注释掉的yield put(get01Action(members));有以下语法错误。

A 'yield' expression is only allowed in a generator body.

不知道怎么管理。

import '@babel/polyfill';
import { fork, take, put } from 'redux-saga/effects';
import axios from "axios";

export function* rootSaga(){
    yield fork(fetch01);
    yield fork(fetch02);
}

function* fetch01() {
    while (true){
        yield take('FETCH01_REQUEST');
        axios.get('/api/members')
            .then(function (response) {
                // handle success
                let members = response.data.data;
                // yield put(get01Action(members));
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
                // always executed
            });
    }
}
function* fetch02() {
    ....
}

function get01Action(members){
    return {
        type: 'GET_MEMBERS',
        member_id: 0,
        members: members
    }
}

请多多指教

谢谢。

Answer 1

你可以使用call effect进行axios调用，然后你就可以使用put了。

现在它不起作用，因为您在 promise 的回调中使用了 yield。

function* fetch01() {
  while (true){
    try {
      yield take('FETCH01_REQUEST');
      const response = yield call(axios.get, '/api/members');
      yield put(get01Action(response.data.data))
    } catch(err) {
      console.error(err)
    }
}

Answer 2

因为你的生成器 fetch01 是同步的，但你正在等待 Promise 被解决。

yield 不能包裹在生成器以外的其他函数中。

您可以像这样制作生成器 async：

export async function* rootSaga(){
    yield await fork(fetch01);
    yield fork(fetch02);
}

async function* fetch01() {
    while (true) {
        yield take('FETCH01_REQUEST');
        try {
            const response = await axios.get('/api/members');
            // handle success
            let members = response.data.data;
            yield put(get01Action(members));
        } catch (error) {
            // handle error
            console.log(error);
        } finally {
            // always executed
        }
    }
}

'yield' 表达式只允许出现在生成器主体中

A 'yield' expression is only allowed in a generator body

reactjs

redux

redux-saga