当我使用 firebase 进行身份验证刷新页面 (localhost) 时，身份验证状态会发生变化

Question

我使用 firebase 进行身份验证和反应，我的应用程序使用 redux。当用户通过身份验证时，auth reducer 会更新。但是当我刷新页面时，它会重置为 INITIAL_STATE。我希望用户在刷新页面时被登录并且其身份验证状态没有变化。我在 action creater 中将 auth.currentUser 作为有效负载传递。

这是我的 AUTH REDUCER

    const INITIAL_STATE = {
  isSignedIn: false,
  errorMessage: null,
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GOOGLE_LOGIN_SUCCESS:
      return {
        ...state,
        isSignedIn: true,
        displayName: auth.currentUser.displayName,
        email: auth.currentUser.email,
        emailVerified: auth.currentUser.emailVerified,
        photoURL: auth.currentUser.photoURL,
        userId: auth.currentUser.uid,
      };
    case GOOGLE_LOGIN_ERROR:
      return {
        ...state,
        errorMessage: action.payload + " Check again before continue",
      };
    case EMAIL_SIGNUP_SUCCESS:
      return {
        ...state,
        isSignedIn: true,
        displayName: auth.currentUser.displayName,
        email: auth.currentUser.email,
        emailVerified: auth.currentUser.emailVerified,
        userId: auth.currentUser.userId,
        photoURL: action.payload.firstName[0],
      };
    case EMAIL_SIGNUP_FAILURE:
      return {
        ...state,
        errorMessage: action.payload + " Check again before continue",
      };
    case EMAIL_LOGIN_SUCCESS:
      return {
        ...state,
        isSignedIn: true,
        displayName: auth.currentUser.displayName,
        emailVerified: auth.currentUser.emailVerified,
        email: auth.currentUser.email,
        userId: auth.currentUser.uid,
      };
    case EMAIL_LOGIN_FAILURE:
      return {
        ...state,
        errorMessage: action.payload + " Check again before continue",
      };
    default:
      return state;
  }
};

这是我的动作创作者

    export const googleLogin = () => async (dispatch) => {
  try {
    const response = await auth.signInWithPopup(provider);

    const doc = await db.collection("users").doc(response.user.uid).get();

    if (doc.exists) {
      await db
        .collection("users")
        .doc(response.user.uid)
        .set(
          {
            accountDetail: {
              emailVerified: response.user.emailVerified,
              photoURL: response.user.photoURL,
            },
          },
          { merge: true }
        );
      await dispatch({ type: GOOGLE_LOGIN_SUCCESS, payload: response.user });
    } else {
      await db
        .collection("users")
        .doc(response.user.uid)
        .set({
          accountDetail: {
            userId: response.user.uid,
            displayName: response.user.displayName,
            email: response.user.email,
            intialsOfDP:
              response.additionalUserInfo.profile.given_name[0] +
              response.additionalUserInfo.profile.family_name[0],
            emailVerified: auth.currentUser.emailVerified,
            photoURL: auth.currentUser.photoURL,
            accountCreatedAt: moment().format("MMMM Do YYYY, h:mm:ss a"),
          },
        });
      await dispatch({
        type: GOOGLE_LOGIN_SUCCESS,
        payload: response.user,
      });
    }
  } catch (error) {
    await dispatch({ type: GOOGLE_LOGIN_ERROR, payload: error.message });
  }
};

export const emailSignUp = (newUser) => async (dispatch) => {
  try {
    const response = await auth.createUserWithEmailAndPassword(
      newUser.email,
      newUser.password
    );
    await auth.currentUser.sendEmailVerification();

    await db
      .collection("users")
      .doc(response.user.uid)
      .set({
        accountDetail: {
          userId: response.user.uid,
          displayName: newUser.firstName + " " + newUser.lastName,
          email: newUser.email,
          photoURL: newUser.firstName[0] + newUser.lastName[0],
          accountCreatedAt: moment().format("MMMM Do YYYY, h:mm:ss a"),
        },
      });

    await dispatch({
      type: EMAIL_SIGNUP_SUCCESS,
      payload: newUser,
    });
  } catch (error) {
    dispatch({ type: EMAIL_SIGNUP_FAILURE, payload: error.message });
  }
};

export const emailLogin = (credentials) => async (dispatch) => {
  try {
    await auth.signInWithEmailAndPassword(
      credentials.email,
      credentials.password
    );
    await dispatch({
      type: EMAIL_LOGIN_SUCCESS,
    });
  } catch (error) {
    dispatch({ type: EMAIL_LOGIN_FAILURE, payload: error.message });
  }
};

我也试过 onAuthChange... 在认证状态改变时监听。所以我用运行 fucntion auth.onAuthStateChange(user=>dispatch({type:"XXX", payload:user}) 的 onAuthChange action creator 替换了所有 auth success action creators。然后我验证用户并运行这个 action creator。但是当用户注销时，它显示错误（空值错误），因为在类型为“XXX”的 authReducer 文件操作中，我取了一些用户值并存储它们。但注销后这些值变为空