如何在 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

你错误的流程老兄，我会尝试在你错误的行代码中给出正确的行代码

调度程序/App.js

import { increment, decrement, fetchPosts} from "./action";
...
...
<button onClick={() => dispatch(fetchPosts())}>Get API</button>
...

注意：调度用于获取 api 的操作（函数）

动作

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

export function fetchPosts() {
  return async (dispatch, getState) => {
      try {
        const {data} = await axios.get("https://jsonplaceholder.typicode.com/users");
        dispatch(get_posts(data));
      catch(err) {
        console.log(err)
      }
  };
}

注意：调度动作类型函数并将响应作为参数负载

Answer 2

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

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