如何使用钩子将变量调度到redux文件


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;

我想在我的 redux 文件中访问 redux file.in 电子邮件,我已经编写了操作和类型。如果需要任何进一步的修改,欢迎给予

冗余操作文件

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

我想访问操作文件中的电子邮件和密码以发送发布请求

错误:dispatch(email)
正确:dispatch({ type: 'YOUR_ACTION_IDENTIFIER', payload: email })

看:

  • redux:调度操作
  • react-redux: useDispatch((

我已经得到了答案

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;

冗余操作文件

export const userLogin = (email) => async (dispatch) => {  
//have to access email inside userLogin function
try {

//code here
}
catch (error) {
//code here
};

如果要将数据发送到 redux 文件,这是最佳方法,方法是将变量作为参数传递

相关内容

  • 没有找到相关文章

最新更新