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

Posted 2023-02-22

【中文标题】如何在 Redux/Redux-thunk 中获取 api？

【英文标题】：How to fetch api in Redux/Redux-thunk?

【发布时间】：2021-06-16 07:41:48

【问题描述】：

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

【问题讨论】：

尝试在 getPosts() 函数上使用异步，并在调用 fetchPosts() 的那一行添加 await 语句。

你遇到了什么错误？

它返回 null，不是任何值

当你等待我上面提到的函数调用时，你仍然得到null吗？

@Blessing 现在收到此错误。 “错误：操作必须是普通对象。使用自定义中间件进行异步操作。”

【参考方案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)
      
  ;

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

【参考方案2】：

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

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

【讨论】：

想通了：- export const get_posts = () => return async function (dispatch) const res = await axios.get("jsonplaceholder.typicode.com/users"); console.log(res.data[ 0].id); dispatch( type: "get_posts", payload: [res.data[0].id], ); ; ;