如何在 react js 功能组件中调度操作后立即在 redux 存储中使用更新的值

Question

在 HandleSignIn 函数中调度 getActionUser Action 后需要更新 "props.error" 的值。 代码使用旧值"props.error"执行，即使在调度操作并更新 Redux 存储后使用它。

请帮助我在调度操作后立即获取更新的值

import React, { useState } from "react";
import { NavLink, Link, withRouter } from "react-router-dom";
import { connect} from 'react-redux';
import {getActiveUser} from "../../redux-store/actions/login";
const handleSignIn = async (e) => {
e.preventDefault();
setdisable(true);
setTimeout(()=>{
setdisable(false)
},500);
if(validateForm()){
const user = { 'email': email, 'password': password };
await props.getActiveUser(user);
// need to use the updated value of (error) after getActiveUser is dispatched
if(props.error){
alert(props.error);
}
else{
alert(props.error)
}
}
}
return (
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={6} md={4}>
<Snackbar
place="tr"
color="warning"
icon={AddAlert}
message="Invalid Credentials"
open={tl}
// closeNotification={() => setTL(false)}
// close
/>
<form>
<Card login className={classes[cardAnimaton]}>
<CardHeader
className={`${classes.cardHeader} ${classes.textCenter}`}
/*color=""*/
style={{margin: '0'}}
>
{/*                <h4 className={classes.cardTitle}>Log in</h4>
<div className={classes.socialLine}>
{[
"fab fa-facebook-square",
"fab fa-twitter",
"fab fa-google-plus"
].map((prop, key) => {
return (
<Button
color="transparent"
justIcon
key={key}
className={classes.customButtonClass}
>
<i className={prop} />
</Button>
);
})}
</div>*/}
<img src={Logo} alt="Paxafe" style={{height: '26px', marginTop: '1.5rem'}}/>
</CardHeader>

<CardBody>
<CustomInput
labelText="Email..."
id="email"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputAdornmentIcon} />
</InputAdornment>
),
onChange: (e) => {
setEmail(e.target.value);
}
}}
onChange={e => setEmail(e.target.value)}
/>
{emailError?(<p style={{color:'#e53935',marginTop:'-15px',position:'absolute'}}>{emailError}</p>):('')}
<CustomInput
labelText="Password"
id="password"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputAdornmentIcon}>
lock_outline
</Icon>
</InputAdornment>
),
type: "password",
autoComplete: "off",
onChange: (e) => {
setPassword(e.target.value);
}
}}
/>
{passwordError?(<p style={{color:'#e53935',marginTop:'-15px',position:'absolute'}}>{passwordError}</p>):('')}
</CardBody>
<CardFooter className={classes.justifyContentCenter}>
<Button color="info" size="lg" block onClick={handleSignIn} type='submit' disabled={disable}>
Login
</Button>
</CardFooter>
</Card>
</form>
</GridItem>
</GridContainer>
</div>
);
}
const mapStateToProps = state =>{
return {
error:state.login.error
}
}
export default withRouter(connect(mapStateToProps,{getActiveUser})(Login));

Answer 1

>props是对象，并作为参数传递给handleSignIn组件。它将使用error进行更新，但仅在下次渲染时更新。

但是您可以从getActiveUser动作创建器返回error

如下所示

const getActiveUser = user => dispatch => {
/* do work */
dispatch ({type: 'ERROR', error });
return error;
}

并且您可以完全消耗组件中的返回值

const error = await props.getActiveUser (user)