为什么 Redux Saga 的 yield 调用返回的是函数，而不是数据？答案

【问题标题】：Why Redux Saga yield call return a function, not data?为什么 Redux Saga 的 yield 调用返回的是函数，而不是数据？
【发布时间】：2021-12-28 07:56:28
【问题描述】：

我正在尝试练习 redux saga，

我有一个问题是没有从async await 返回数据。

使用以下代码：

/src/sagas/todos/index.js

export function* fetchTodosSaga() {

    console.log('Ready to fetch Todos ...');

    try {

        const _todos = yield call(fetchTodos);
        console.log(_todos); // Not a Result Data, It is a function

        yield put({
            type: "FETCH_TODOS_FULFILLED",
            payload: {
                todos: _todos
            }
        });

    } catch (e) {

        yield put({ 
            type: "USER_FETCH_FAILED", 
            message: e.message 
        });

    }

    return 'Hello';

}

/src/actions/sagas/todos.js

 export const fetchTodos = (params) => async (dispatch) => {
     try {

         const getTodosResponse = await todosAPI.getTodos(params);
         console.log(getTodosResponse.data); // It is a CORRECT data
         dispatch(fetchTodosAction(getTodosResponse.data));
         return Promise.resolve(getTodosResponse.data);
         
     } catch (error) {
         return Promise.reject(error);
     }
 }

/src/services/api/todos/index.js

 export default {
     async getTodos() {
         try {
             return await axios.get(`${ baseUrl }/${ routes.todos }`);
         } catch (error) {
             return Promise.reject(error);
         }
     }
 }

以及来自 chrome 检查器的控制台结果

ƒ (_x) {
    return _ref.apply(this, arguments);
}

我应该如何解决这个问题？

【问题讨论】：

这样您就可以在数据库中成功后回调该函数，因此两者都是同步的
谢谢@AshishKamble，我还是不明白哪个部分可以回调？您介意尝试编码您的评论吗？

标签： javascript node.js reactjs async-await redux-saga

【解决方案1】：

来自文档call(fn, ...args)：

fn: Function - 生成器函数，或返回 Promise 作为结果或任何其他值的普通函数。

但是你向call 传递了一个thunk。 thunk 返回一个函数而不是一个承诺或非函数值。这就是为什么_todos 是一个函数。

当您使用redux-saga 时，您不需要使用redux-thunk。您应该将 API 调用函数 todosAPI.getTodos 传递给 call 效果创建者。

例如

import { runSaga } from 'redux-saga';
import { call, put } from 'redux-saga/effects';

const todosAPI = {
  async getTodos() {
    return { data: ['a', 'b', 'c'] };
  },
};

export function* fetchTodosSaga() {
  try {
    const _todos = yield call(todosAPI.getTodos);
    console.log(_todos);
    yield put({ type: 'FETCH_TODOS_FULFILLED', payload: { todos: _todos } });
  } catch (e) {
    yield put({ type: 'USER_FETCH_FAILED', message: e.message });
  }

  return 'Hello';
}

(function test() {
  let dispatched = [];
  runSaga({ dispatch: (action) => dispatched.push(action), getState: () => {} }, fetchTodosSaga);
})();

输出：

{ data: [ 'a', 'b', 'c' ] }

【讨论】：