如何使用 React 和 Redux 制作预加载器？答案

【问题标题】：How to make preloader using React with Redux?如何使用 React 和 Redux 制作预加载器？
【发布时间】：2020-07-25 16:59:18
【问题描述】：

我有这样的问题：我为我的 React 应用程序制作了预加载器，当用户点击按钮 LoginIn（在此之前输入他的电子邮件和密码）加载器开始工作，但是当用户输入错误的电子邮件或密码时, 或服务器端出现问题，它必须向用户显示错误，但在此步骤中它显示预加载器不会消失并且它是合乎逻辑的，因为它sests loadingAuth === true，当loadingAuth === true 它显示预加载器，但是由于错误无法设置false。那么，在这种情况下我需要做什么？

重击：

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

【问题讨论】：

标签： javascript reactjs redux redux-thunk

【解决方案1】：

发生错误时，您已经调用了dispatch(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>)
}

【讨论】：