How can I dispatch my variables to redux file with hooks - reactjs

Question

const LoginContainer = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const onLoginClick = (e) => {
dispatch(userLogin);
dispatch(email);
};
return (
<>
<div className='content'>
<SectionLogin
onLoginClick={onLoginClick}
setEmail={setEmail}
setPassword={setPassword}
/>
</div>
</>
);
};
export default LoginContainer;
I want to access email in redux file.in my redux file, I have wrote actions and types. Give are welcome if any further modification is required
Redux Action file
export const userLogin = async (dispatch, action) => {
dispatch({ type: POST_LOGIN_DETAILS_START });
try {
const response = await fetch('http://localhost:5000/api/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
}),
});
const payload = await response.json();
dispatch({ type: POST_LOGIN_DETAILS_SUCCESS, payload });
} catch (error) {
dispatch({ type: POST_LOGIN_DETAILS_FAIL });
}
};
I want to access email and password in action file to send a post request

Answer 1

wrong: dispatch(email)
right: dispatch({ type: 'YOUR_ACTION_IDENTIFIER', payload: email })
see:
redux: dispatch an action
react-redux: useDispatch()

Answer 2

I have got the answer
import React, { useState } from 'react';
import { useDispatch } from 'react-redux'; import SectionLogin from './LoginPage'; import { userLogin } from './dux';
const LoginContainer = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const onLoginClick = (e) => {
dispatch(userLogin);
dispatch(userLogin(email));// should pass variables as argument to the function
};
return (
<>
<div className='content'>
<SectionLogin
onLoginClick={onLoginClick}
setEmail={setEmail}
setPassword={setPassword}
/>
</div>
</>
);
};
export default LoginContainer;
Redux Action file
export const userLogin = (email) => async (dispatch) => {
//have to access email inside userLogin function
try {
//code here
}
catch (error) {
//code here
};
This is the best method if you want to send data to the redux file, by passing the variable as an argument