使用 Saga 获取 API 没有给出任何响应

Posted 2023-02-19

【中文标题】使用 Saga 获取 API 没有给出任何响应

【英文标题】：Fetch API using Saga didn't give any response

【发布时间】：2021-05-07 16:52:36

【问题描述】：

所有..

我是 react 新手，我在项目中使用 react、redux 和 redux saga。我只是使用 saga 进行简单的 api 获取。但我不知道为什么yield put 命令看起来不起作用。

下面的代码是我的代码：

类型

export const GET_USERS_REQUESTED = "GET_USERS_REQUESTED";
export const GET_USERS_SUCCESS = "GET_USERS_SUCCESS";
export const GET_USERS_FAILED = "GET_USERS_FAILED";

行动

import * as type from "../types/users";

export function getUsers(users) 
  return 
    type: type.GET_USERS_REQUESTED,
    payload: users,
  ;
;

减速器 从“../types/users”导入 * 作为类型；

const initialState = 
  users: [],
  loading: false,
  error: null,
;

export default function users(state = initialState, action) 
  switch (action.type) 
    case type.GET_USERS_REQUESTED:
      return 
        ...state,
        loading: true,
      ;
    case type.GET_USERS_SUCCESS:
      return 
        ...state,
        users: action.users,
        loading: false,
      ;
    case type.GET_USERS_FAILED:
      return 
        ...state,
        loading: false,
        error: action.message,
      ;

    default:
      return state;
  

根减速器

import  combineReducers  from "redux";
import users from "./users";

const rootReducer = combineReducers(
  users: users,
);

export default rootReducer;

用户传奇

import  call, put, takeEvery  from "redux-saga/effects";
import * as type from "../redux/types/users";

function getApi() 
  return fetch("https://jsonplaceholder.typicode.com/users", 
    method: "GET",
    headers: 
      "Content-Type": "application/json",
    ,
  )
    .then((response) => 
      response.json();
    )
    .catch((error) => 
      throw error;
    );


function* fetchUsers(action) 
  try 
    const users = yield call(getApi());
    yield put( type: type.GET_USERS_SUCCESS, users: users );
   catch (e) 
    yield put( type: type.GET_USERS_FAILED, message: e.message );
  


function* userSaga() 
  yield takeEvery(type.GET_USERS_REQUESTED, fetchUsers);


export default userSaga;

根传奇

import  all  from "redux-saga/effects";
import userSaga from "./users";

export default function* rootSaga() 
  yield all([userSaga()]);

创建商店

import  createStore, applyMiddleware, compose  from "redux";
import rootReducer from "./reducers/index";
import createSagaMiddleware from "redux-saga";
import rootSaga from "../sagas/index";

const sagaMiddleware = createSagaMiddleware();
const store = compose(
  window.devToolsExtension && window.devToolsExtension(),
  applyMiddleware(sagaMiddleware)
)(createStore)(rootReducer);
sagaMiddleware.run(rootSaga);

export default store;

我不知道为什么我的用户传奇看起来不起作用。因为加载状态仍然具有真正的价值。希望任何人都可以帮助我。

提前致谢

【问题讨论】：

这个问题已经解决了。问题在于我的 create store 文件。这是使用这个调试器window.devToolsExtension && window.devToolsExtension()。当我删除这些行时，它可以正常工作.. 谢谢所有

【参考方案1】：

您正在调用您的getApi 并将承诺返回给call 本身。 call 将为您做到这一点。所以只需像这样提供call 和getApi：

...

function* fetchUsers(action) 
  try 
    const users = yield call(getApi); // <-- HERE IS THE CHANGE

    yield put( type: type.GET_USERS_SUCCESS, users: users );
   catch (e) 
    yield put( type: type.GET_USERS_FAILED, message: e.message );
  


...

由于您使用的是 fetch，因此您还需要更改您的 getApi：

async function getApi() 
  const result = await fetch('https://jsonplaceholder.typicode.com/users', 
    method: 'GET',
    headers: 
      'Content-Type': 'application/json',
    ,
  )
    .then((response) => 
      response.json();
    )
    .catch((error) => 
      throw error;
    );

  return result;

如果您需要为getApi 调用提供变量，您可以这样做：

const users = yield call(getApi, 'someValue');

而你 getApi 看起来像这样：

async function getApi(someValue) 
  const result = await fetch(`https://jsonplaceholder.typicode.com/users/$someValue`, 
    method: 'GET',
    headers: 
      'Content-Type': 'application/json',
    ,
  )
    .then((response) => 
      return response.json();
    )
    .catch((error) => 
      throw error;
    );

  return result;

【讨论】：

我只是删除括号并尝试在 getApi 之后放置console.log("test")。但是，它仍然不起作用，谢谢@Mario Petrovic

@bagongpct 它应该可以工作，这就是call 的工作方式。你能用工作示例制作codeandbox吗

啊，我可能知道出了什么问题。 @bagongpct 我会改变我的答案

【参考方案2】：

当您使用call 时，您不应该使用call() 它。输入yield call(getApi, "in case you have arguments")。当你等待一个承诺时，你应该这样做

【讨论】：

谢谢 Yovcho Kalev，但还是不行

谢谢@Yovcho Kalev...通过在create store文件中删除window.devToolsExtension && window.devToolsExtension()这个来完成