时间戳

首页 > 解决方案 > 如何在 Redux/Redux-thunk 中获取 api？

reactjs - 如何在 Redux/Redux-thunk 中获取 api？

问题描述

我是redux的新手。我无法调用 API。像递增、递减等所有其他操作都可以正常工作，但 get_posts() 无法正常工作。请帮助我，有关最佳实践的其他信息会很有帮助。谢谢我已经应用了 redux-thunk 中间件，但无法调用 API。我被困在 redux 上好几天了。

减速器

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload;
    case "DECREMENT":
      return state - 1;
    case "get_posts":
      return action.payload;
    default:
      return state;
  }
};
export default countReducer;

行动

import axios from "axios";

export const increment = (nr) => {
  return {
    type: "INCREMENT",
    payload: nr,
  };
};

export const decrement = () => {
  return {
    type: "DECREMENT",
  };
};

export const get_posts = () => {
  return {
    type: "get_posts",
    payload: fetchPosts,
  };
};

export function fetchPosts() {
  return async (dispatch) => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/users");
    dispatch(get_posts());
  };
}

调度程序/App.js

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, get_posts } from "./action";
function App() {
  const counter = useSelector((state) => state.counter);
  const isLogged = useSelector((state) => state.isLogged);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment(5))}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(get_posts())}>Get API</button>
      {isLogged ? <h3>Valuable info I shouldnt</h3> : "NOt logged"}
    </div>
  );
}

export default App;

标签： reactjsreduxreact-reduxaxiosredux-thunk

解决方案

发生的第一个错误是你调用fetchPosts而不是fetchPosts()因为它是一个函数。为了确保你得到你的数据，你必须等待这样的调用fetchPosts。

export const get_posts = async () => {
  return {
    type: "get_posts",
    payload: await fetchPosts(),
  };
};

推荐阅读