如何在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());
};
}

Dispatcher/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()，因为它是一个函数。为了确保您正在获取数据，您必须像这样等待fetchPosts的调用。

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

Answer 2

你流错了伙计，我会在你错误的行代码中给出正确的行代码

Dispatcher/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)
}
};
}

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