Call action from Redux store, to change React component state - reactjs

Question

I have the following action, making an asynchronous GET request:
export const getPolls = () => {
return async dispatch => {
try {
const polls = await serv.call('get', 'poll');
dispatch(setPolls(polls));
dispatch(removeError());
} catch (err) {
const error = err.response.data;
dispatch(addError(error.message));
}
}
}
Then, in component Polls, I want to be able to call this action, so I can show the list of Polls. To do this, I pass it on to this component's props:
export default connect(store => ({
polls: store.polls
}), {
getPolls
})
(Polls);
And access it through const {getPolls} = props;
I am using React Hooks to create and change the Polls component state. Like this:
const Polls = (props) => {
const {getPolls} = props
const [polls, setPolls] = useState([])
useEffect(() => {
const result = getPolls()
console.log(result)
setPolls(result)
}, [])
const pollsList = polls.map(poll => (<li key={poll._id}>{poll.question}</li>))
return (
<div>
<ul className='poll-list'>{pollsList}</ul>
</div>
)
}
With this code, I'm not able to get the polls. When I console.log the result from calling getPolls(), I can see I'm obtaining a Promise. However, since getPolls() is an async function, shouldn't this be avoided? I believe the problem has something to do with the way I'm using React Hooks, particularly useEffect, but I can't figure it out.
Thank you.

Answer 1

When I console.log the result from calling getPolls(), I can see I'm obtaining a Promise. However, since getPolls() is an async function, shouldn't this be avoided?
You have a fundamental misunderstanding of async functions. async and await are just syntaxes that help you deal with Promises. An async function always returns a Promise. In order to get an actual value, you would have to await the value from inside another async function.
But your getPolls() function is not a function that returns the polls. It doesn't return anything. It fetches the polls and calls dispatch with the data to store the polls in your redux store.
All that you need to do in your component is call getPolls so that this code is executed. Your connect HOC is subscribing to the current value of polls from store.polls and the polls prop will update automatically when the getPolls function updates store.polls (which it does by calling dispatch(setPolls(polls))).
Your component can be simplified to this:
const Polls = (props) => {
const {polls, getPolls} = props;
// effect calls the function one time when mounted
useEffect(() => {
getPolls();
}, [])
const pollsList = polls.map(poll => (<li key={poll._id}>{poll.question}</li>))
return (
<div>
<ul className='poll-list'>{pollsList}</ul>
</div>
)
}