Best practices of using and making API calls with React Redux - reactjs

Question

I'm doing an API call to my server using Redux, but I'm unsure what the "best practices" are for doing so.
When simply using React, one common way of doing API calls is that you create a folder called for example hooks, where you create your own custom hooks to make the API calls that you want.
However, when it comes to using Redux with React, it is not really clear to me what the best method of structuring your client and API calls are, in order to make it more readable and easy to scale in the future.
Questions
So, what are the best practises for making API calls with Redux in React to increase readability and scaleability?
Second question, what are the best practises to use API calls in a functional component in React with React Redux?
Here below are the current structure of a project, where I make a simple GET request using Redux to the server, which respons with the JSON Placeholder /post.
Starting off with the file structure, to give a better understanding of where everything is located.
Files related to the API call
index.js (root)
import App from "./App";
import reducers from "./reducers";
ReactDOM.render(
<Provider store={createStore(reducers, applyMiddleware(thunk))}>
<App />
</Provider>,
document.querySelector("#root")
);
index.js (reducers)
import postReducer from "./postReducer";
export default combineReducers({
posts: postReducer,
});
postReducer.js (reducers)
import _ from "lodash";
import { GET_POSTS } from "../actions/types";
function postReducer(state = {}, action) {
switch (action.type) {
case GET_POSTS:
return { ...state, ..._.mapKeys(action.payload, "id") };
default:
return state;
}
}
export default postReducer;
requestPosts.js (apis)
import axios from "axios";
const API_URL = "http://localhost:8000";
async function httpGetAllPosts() {
const response = await axios.get(`${API_URL}/posts`);
return response.data;
}
export { httpGetAllPosts};
types.js (actions)
export const GET_POSTS = "GET_POSTS";
index.js (actions)
import { httpGetAllPosts } from "../apis/requestPosts";
import { GET_POSTS } from "./types";
const getAllPosts = () => async (dispatch) => {
const response = await httpGetAllPosts();
dispatch({ type: GET_POSTS, payload: response });
};
export { getAllPosts };
Moving on to the second question. What are the best practises to use API calls in a functional component in React with React Redux?
Here is how I used it in a functional component. Is this the ideal way of doing it? I think the useEffect looks a bit weird, when all it does is call a function and has a dependancy related to that function.
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getAllPosts } from "../actions";
import { Card } from "react-bootstrap";
const Posts = ({ getAllPosts, posts }) => {
useEffect(() => {
getAllPosts();
}, [getAllPosts]);
return (
<div>
{posts.map((post) => {
return (
<Card style={{ width: "45rem", marginBottom: "1rem" }} key={post.id}>
<Card.Body>
<Card.Title>{post.title}</Card.Title>
<Card.Text>{post.body}</Card.Text>
</Card.Body>
</Card>
);
})}
</div>
);
};
const mapStateToProps = (state, ownProps) => {
return { posts: Object.values(state.posts) };
};
export default connect(mapStateToProps, { getAllPosts })(Posts);