onSubmit和API调用上的异步操作的react-redux问题

Question

我刚刚开始使用react和redux。我首先在没有redux的情况下开始了这个项目，现在我决定用redux来实现它。在我将其调整为redux之前，登录成功了。ThunkMiddleware应用

现在的问题是：当我点击登录按钮时，记录器或DevTools只显示login_FAILURE。页面将重新加载并再次显示登录信息。

如果我改变这个onSubmit={() => props.login(username, password)}到这个onSubmit={props.login(username, password)}

LOGIN_REQEST操作是垃圾邮件，最后(如果密码存储在浏览器中(LOGIN_SCCESS。我从服务器上获得了具有正确数据的实际内容。

我必须更改什么才能使登录正常工作？

感谢您的帮助

登录组件：

function Login(props) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
return (
<div>
<form onSubmit={() => props.login(username, password)}>
<TextField
onChange={e => setUsername(e.target.value)}
/>
<br/>
<TextField
onChange={e => setPassword(e.target.value)}
/>
<br/>
<Button type="submit">
Login
</Button>
</form>
</div>);
}
const mapDispatchToProps = dispatch => {
return {
login: (username, password) => dispatch(login(username, password))
}
};
export default connect(
null,
mapDispatchToProps
)(Login)

登录操作

import {
LOGIN_FAILURE,
LOGIN_REQUEST,
LOGIN_SUCCESS
} from "./LoginTypes";
export const login = (username = '', password = '') => {
return (dispatch) => {
dispatch(loginRequest());
axios.post(`server`, {
//data
}).then(
(res) => {
dispatch(loginSuccess(res));
},
(err) => {
dispatch(loginFailure(err.message));
}
);
}
};
export const loginRequest = () =>{
return {
type: LOGIN_REQUEST
}
};
export const loginSuccess = tabs =>{
return {
type: LOGIN_SUCCESS,
payload: tabs
}
};
export const loginFailure = error =>{
return {
type: LOGIN_FAILURE,
payload: error
}
};

LoginReducer:

const LoginReducer = (state = initialState, action) => {
switch (action.type){
case LOGIN_REQUEST:
return {
...state,
loading: true
};
case LOGIN_SUCCESS:
let tabBars = populateArray1(action.payload);
let navIcons = populateArray2();
return{
...state,
loading: false,
tabBars: tabBars,
navIcons: navIcons,
isLoggedIn: true
};
case LOGIN_FAILURE:
return{
...state,
loading: false,
error: action.payload
};
default: return state;
}
};

组件，用于控制登录和内容：

function Main(props) {
if(props.auth){
return(
<NotLogin />
)
}
else{
return <Login />
}
}

Answer 1

您的登录页面正在进行刷新/重定向，因此无法处理api请求&其反应正确。请通过更新您的登录组件来尝试此操作。

function Login(props) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = (event) => {
event.preventDefault()
props.login(username, password);
}
return (
<div>
<form onSubmit={handleLogin}>
<TextField
onChange={e => setUsername(e.target.value)}
/>
<br/>
<TextField
onChange={e => setPassword(e.target.value)}
/>
<br/>
<Button type="submit">
Login
</Button>
</form>
</div>);
}

更新后，请确保通过Main组件中的redux在props.auth中获得正确的值。Main组件应该在代码中具有redux-auth状态的redux-connection。