Reactjs 如何在react js functional components中调度操作后立即在redux store中使用更新的值

在HandleSignIn函数中调度getActionUser操作后，需要更新“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));

import React，{useState}来自“React”；
从“react router dom”导入{NavLink，Link，withRouter}；
从'react redux'导入{connect}；
从“../../redux存储区/actions/login”导入{getActiveUser}；
const handleSignIn=async（e）=>{
e、 预防默认值（）；
设置禁用（true）；
设置超时（（）=>{
设置禁用（错误）
},500);
if（validateForm（））{
const user={'email'：email，'password'：password}；
等待道具。getActiveUser（用户）；
//在调度getActiveUser之后，需要使用（error）的更新值
如果（道具错误）{
警报（道具错误）；
}
否则{
警报（道具错误）
}
}
}
返回(
结算（假）}
//接近
/>
{/*登录
{[
“fab fa facebook广场”，
“fab fa twitter”，
“fab fa google plus”
].map（（道具、钥匙）=>{
返回(
);
})}
*/}
{
setEmail（例如target.value）；
}
}}
onChange={e=>setEmail（e.target.value）}
/>
{emailError？（
{emailError}
）：（'''）}
{
设置密码（如目标值）；
}
}}
/>
{passwordError？（
{passwordError}
）：（''）}
登录
);
}
常量mapStateToProps=状态=>{
返回{
错误：state.login.error
}
}
使用路由器导出默认值（connect（mapstatetops，{getActiveUser}）（Login））；

props

是对象，作为参数传递给

handleSignIn

组件。它将更新为

错误

，但仅在下次渲染时更新

但是您可以从

getActiveUser

操作创建者返回

error

，如下所示

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

您可以立即使用组件中的返回值

const error = await props.getActiveUser (user)

---

它起作用了。但是为什么我不能得到更新的redux值呢。如果没有得到这个值，为什么要使用redux呢反应组件的想法是它是1。获得道具2。在屏幕3上渲染某物。如果道具更新了，它会重新播放等等，这样当您在组件代码中时，porp是静态的。道具将更新，组件将重新发布。React将合并来自组件的更新，并向用户呈现平滑的界面。当道具是静态的时，开发组件比偶尔更换道具更容易