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

Question

我有这样的问题：我为我的 React 应用程序制作了预加载器，当用户点击按钮 LoginIn（在此之前输入他的电子邮件和密码）加载器开始工作，但是当用户输入错误的电子邮件或密码，或者服务器端发生了错误，它必须向用户显示错误，但在这一步中它显示预加载器不会消失并且它是合乎逻辑的，因为它设置 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>
  )
}

Answer 1

您已经在发生错误时调用了 dispatch(getError(error))。假设初始错误状态值为 null 并且错误状态映射到名为 error.

的 prop

然后您可以像使用 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>)
}

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

How to make preloader using React with Redux?

javascript

reactjs

redux

redux-thunk