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

Question

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

Answer 1

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

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