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

问题描述

所有..

我是 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,};
};

减速器 import * as type from "../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,};
    case type.GET_USERS_Failed:
      return {
        ...state,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;

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

提前致谢

解决方法

您正在调用您的 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 });
  }
}

...

此外，您还需要更改您的 getApi，因为您正在使用 fetch：

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}`,})
    .then((response) => {
      response.json();
    })
    .catch((error) => {
      throw error;
    });

  return result;
}

,

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