时间戳

首页 > 解决方案 > 使用 Saga 获取 API 没有给出任何响应

reactjs - 使用 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,
  };
};

减速器 从“../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;

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

提前致谢

标签： reactjsreduxreact-reduxredux-sagasaga

解决方案

您正在调用您的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}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      return response.json();
    })
    .catch((error) => {
      throw error;
    });

  return result;
}

推荐阅读