Javascript 如何使用React with Redux制作预加载程序？

我有这样的问题：我为我的React应用程序做了预加载，当用户点击按钮

login

（在此之前输入他的电子邮件和密码）加载程序开始工作，但是当用户输入错误的电子邮件或密码，或者服务器端出现问题时，它必须向用户显示错误，但在这一步中，它显示的预加载程序并没有显示，而且逻辑上是正确的，因为它检测

loadingAuth===true

，当

loadingAuth==true

时，它显示的是预加载程序，但由于错误，它不能设置

false

。那么，在这种情况下我需要做什么

---

Thunk:

export const loginInWithEmail = (email, password) => (dispatch) => {
    dispatch(loadingAuth(true)) //start preloader
    fire.auth()
        .signInWithEmailAndPassword(email, password)
        .then(() => dispatch(loadingAuth(false))) //end preloader
        .catch((error) => {
            dispatch(getError(error));
        });
};

const MyComponent = ({//props}) => {
  return(
    <div>
      {isLoading === true  
        ? <AuthPreloader /> 
        : <Component/>
      }
    </div>
  )
}

---

组件：

export const loginInWithEmail = (email, password) => (dispatch) => {
    dispatch(loadingAuth(true)) //start preloader
    fire.auth()
        .signInWithEmailAndPassword(email, password)
        .then(() => dispatch(loadingAuth(false))) //end preloader
        .catch((error) => {
            dispatch(getError(error));
        });
};

const MyComponent = ({//props}) => {
  return(
    <div>
      {isLoading === true  
        ? <AuthPreloader /> 
        : <Component/>
      }
    </div>
  )
}

constmycomponent=（{//props}）=>{
返回(
{isLoading===真
?  
: 
}
)
}

发生错误时，您已经调用了

调度（getError（error））

。假设初始错误状态值为

null

，错误状态映射到名为

error

的属性

然后，您可以像使用

isLoading

一样使用错误道具，如下所示：

const MyComponent = ({//props}) => {
  // ...
  let content;

  if (error) {
    content = <p>There is an error</p>;
  } else if (isLoading) {
    content = <AuthPreloader />;
  } else {
    content = <Component />;
  }

  return(<div>{content}</div>)
}

constmycomponent=（{//props}）=>{
// ...
让内容；
如果（错误）{
content=有一个错误
；
}else if（正在加载）{
内容=；
}否则{
内容=；
}
返回（{content}）
}

发生错误时，您已经调用了

调度（getError（error））

。假设初始错误状态值为

null

，错误状态映射到名为

error

的属性

然后，您可以像使用

isLoading

一样使用错误道具，如下所示：

const MyComponent = ({//props}) => {
  // ...
  let content;

  if (error) {
    content = <p>There is an error</p>;
  } else if (isLoading) {
    content = <AuthPreloader />;
  } else {
    content = <Component />;
  }

  return(<div>{content}</div>)
}

constmycomponent=（{//props}）=>{
// ...
让内容；
如果（错误）{
content=有一个错误
；
}else if（正在加载）{
内容=；
}否则{
内容=；
}
返回（{content}）
}