我正在尝试通过 Redux Toolkit 实现 Firebase 身份验证。但我认为由于缺乏知识我错过了一些东西。

My monitorAuthChange回报undefined.

我有两个单独的文件 - 第一个是 firebase 函数列表，第二个是 Redux Toolkit 切片。

import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "./firebaseConfig";

export const createAccount = async (email, password) => {
  try {
    await createUserWithEmailAndPassword(auth, email, password);
  } catch (error) {
    console.log(error);
  }
};

export const monitorAuthChange = () => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      return true;
    } else {
      return false;
    }
  });
};

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { createAccount, monitorAuthChange } from "../../service/userServices";

export const createUser = createAsyncThunk(
  "users/createUser",
  async ({ username, password }) => {
    await createAccount(username, password);
  }
);

const initialState = { loginStatus: false };

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers: {
    [createUser.fulfilled]: (state, action) => {
      const result = monitorAuthChange();
      state.loginStatus = result;
    },
    [createUser.rejected]: (state, action) => {
      state.loginStatus = false;
    },
  },
});

export const selectAllUsers = (state) => state.users;
export default userSlice.reducer;

有两件事让我很困惑：

1. 1. Thunk 有效 - 它创建帐户，我在 Firebase 中看到它。我需要以不同的方式跟踪请求结果吗？
2. 2. If add console.log(user) inside monitorAuthChange它记录的数据取决于用户是否已创建。但仍然返回未定义。 希望您能阅读任何提示、建议或文章来理解我的错误。提前致谢。

看来您想跟踪用户身份验证onAuthStateChanged你有很多方法可以将此回调插入到 redux 中。

你不能打电话monitorAuthChange在减速器内部，因为它们必须是纯净的。

使用全球商店

// users.slice.ts
const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoginStatus: (state, action) {
      state.loginStatus = action.payload;
    }
  },
  extraReducers: {
    [createUser.fulfilled]: (state, action) => {
      state.loginStatus = true;
    },
    [createUser.rejected]: (state, action) => {
      state.loginStatus = false;
    },
  },
});

// trackUserAuth.ts
onAuthStateChanged(auth, (user) => {
    if (user) {
      store.dispatch(setLoginStatus(true))
    } else {
      store.dispatch(setLoginStatus(true))
    }
});

使用钩子

export const useAuth = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        dispatch(setLoginStatus(true))
      } else {
        dispatch(setLoginStatus(true))
      }
    });
    return unsubscribe;
  }, []);
}

使用重击

export const checkAuthStatus = () => (dispatch) {
  const unsubscribe = Firebase.auth().onAuthStateChanged(user => {
    if (user) {
      dispatch(setLoginStatus(true))
    } else {
      dispatch(setLoginStatus(true))
    }
  });

  return unsubscribe;
}