Estoy tratando de practicar saga redux,
Tengo una pregunta que no es devolver datos de async await .
Con los siguientes códigos:
/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); } } }Y el resultado de la consola del inspector de cromo
ƒ (_x) { return _ref.apply(this, arguments); }¿Cómo debo solucionar el problema?
Desde la llamada doc (fn, ...args) :
fn: Function: una función de generador o una función normal que devuelve una Promesa como resultado o cualquier otro valor.
Pero pasaste un thunk para call . El procesador devuelve una función en lugar de una promesa o un valor que no es una función. Por eso _todos es una función.
Cuando usa redux-saga , no necesita usar redux-thunk . Debe pasar la función de llamada API todosAPI.getTodos al creador del efecto de call .
P.ej
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); })();Producción:
{ data: [ 'a', 'b', 'c' ] }