Using async await with `useSelector` in React hooks - reactjs

Question

I have a functional component that that has an input field where the user types a question and hits enter and I send the query to the backend.
Here is the simplified version of the functional component
UserQuery.js
import {postQuery} from '../actions/postQueryAction'
const UserQuery = () => {
const [name, setName] = useState("")
function sendMessage(userQuery) {
postUserQuery(userQuery)
}
return (
<>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
onKeyPress={sendMessage}
id="userQuery"
/>
</>
)
}
export default UserQuery
As you can see I have a callback called postQuery which actually makes the axios request and posts the user query. Here is how it looks like
postQueryAction.js
export const postQuery = (userQuery) => async dispatch => {
let userInfo = useSelector(state => state.userInfo.data)
const username = userInfo.username
const group = userInfo.group
const headers = {
'Content-Type': 'application/json;charset=UTF-8',
}
const params = {
group: group,
user: username,
data: userQuery
}
await axios.post(`/postQuestion`,params, {headers}, {
}).then(response => {
console.log("response check", response.data);
})
.catch(err => {
console.log("Error log", err);
});
}
But I get Invalid hook call error. If I remove useSelector code, then it doesn't complain and the request goes through.
I could use the useSelector in original functional component (UserQuery.js) and pass the parameters accordingly. But I want the postQuery method to only accept the userQuery parameter and figure the other information from the redux state.
What should I do?

Answer 1

Hooks can only be called from react components or other hooks. Instead of using the hook inside the postQuery function you could call it in the component and pass the user info to postQuery
const UserQuery = () => {
const [name, setName] = useState("");
let userInfo = useSelector((state) => state.userInfo.data);
function sendMessage(userQuery) {
postUserQuery(userQuery, userInfo);
}
...
export const postQuery = (userQuery, userInfo) => async (dispatch) => {
...