为什么预加载器在我的 React 应用程序中不起作用？

Question

我正在制作 React App (+ Redux)，我想在用户按下按钮LoginIn时制作预加载器。 所以，我做了这样的thunk：

export const loginInWithEmail = (email, password) => dispatch => {
    dispatch(loadingAuth(true)) //action which sets loading status
    fire.auth() // auth with email using Firebase
        .signInWithEmailAndPassword(email, password)
        .catch((error) => {
            getError(error);
        });
    dispatch(loadingAuth(false))
}

然后在我的组件中，我做了这样的：

<div>
  {isLoading === true ? <AuthPreloader /> :
    <div>
      {user ? (
        <MainContainer userEmail={userEmail} />
      ) : (
       // component code
    )}
  </div>}
</div>

但是当我按下按钮时预加载器没有出现（系统连接我并重定向到MainContainer组件）

PS动作和thunk工作

Answer 1

我认为问题在于 Firebase 身份验证是一个异步过程，可能需要一段时间。 因此dispatch(loadingAuth(false))在身份验证实际完成之前被调用。

您如何处理这个问题是通过执行以下操作：

// ...
fire
  .auth() // auth with email using Firebase
  .signInWithEmailAndPassword(email, password)
  .then(() => {
    dispatch(loadingAuth(false));
  })
  .catch((error) => {
    // handle error
  });
// ...