使用Redux Toolkit+Firebase Auth开发登录功能遇两类技术问题

问题1：Redux状态检测到非序列化值错误 #

问题原因 #

Redux要求状态必须是可序列化的数据类型（如字符串、数字、普通对象/数组），你在initialState中定义了login和logout函数，函数属于不可序列化的值，因此触发该错误。此外，Redux状态的职责是存储数据，业务逻辑函数不应放在状态中。

解决方案 #

移除状态中的函数，仅保留token和isLoggedIn两个数据字段；登录/登出时的localStorage操作放在组件逻辑中，Redux仅负责更新登录状态和token。

修改后的login-store.js：

const { configureStore, createSlice } = require("@reduxjs/toolkit");

const userAuth = createSlice({
    name: "login",
    initialState: {
        token: localStorage.getItem("userLoginToken") || "",
        isLoggedIn: !!localStorage.getItem("userLoginToken"),
    },
    reducers: {
        logginOut(state) {
            state.isLoggedIn = false;
            state.token = "";
        },
        loggingIn(state, action) {
            state.isLoggedIn = true;
            state.token = action.payload;
        },
    },
});

const authStore = configureStore({
    reducer: userAuth.reducer,
});

export const userAuthAction = userAuth.actions;

export default authStore;

问题2：切换登录/注册表单时弹出错误提示 #

问题原因 #

「New User」按钮位于<form>标签内，未指定type属性时，浏览器默认将其视为type="submit"，点击会触发表单的onSubmit事件，此时输入框为空，Firebase Auth返回错误，因此弹出alert。

解决方案 #

给「New User」按钮添加type="button"属性，阻止其触发表单提交。

修改后的Login.js中对应按钮代码：

<button 
    type="button" 
    className={classes.newUser} 
    onClick={switchAuthTextHandler}
>
    {isLogin ? "New User?" : "Already have account"}
</button>

同时，调整Login.js中的登录逻辑，在获取到token后先存储到localStorage，再dispatch action：

.then((data) => {
    localStorage.setItem("userLoginToken", data.idToken);
    dispatch(userAuthAction.loggingIn(data.idToken));
    navigate("/");
    console.log(data);
})

注册错误截图 #

内容的提问来源于stack exchange，提问作者Mohit