Redux Toolkit实现认证时注册功能失效求助

核心问题：Action名称大小写不匹配 #

你的代码里存在一个关键错误：在reducers中定义的注册开始action是RegisterStart（首字母大写），但在export导出时写的是registerStart（全小写）。Redux Toolkit的action名称严格区分大小写，这会导致调用注册开始的action时无法触发对应的reducer逻辑，直接导致注册流程卡住。

修复后的完整代码 #

import { createSlice } from "@reduxjs/toolkit";
import { toast } from 'react-toastify';

const userSlice = createSlice({
  name: "user",
  initialState: {
    currentUser: null,
    isFetching: false,
    error: false,
  },
  reducers: {
    loginStart: (state) => {
      state.isFetching = true;
    },
    loginSuccess: (state, action) => {
      state.isFetching = false;
      state.currentUser = action.payload;
      toast.success("Logged In Successfully")
    },
    loginFailure: (state) => {
      state.isFetching = false;
      state.error = true;
      toast.error("Invalid username or password")
    },
    // 统一为小写开头的registerStart，与导出名称匹配
    registerStart: (state) => {
      state.isFetching = true;
    },
    registerSuccess: (state, action) => {
      state.isFetching = false;
      state.error = false; // 额外添加：重置错误状态，避免影响后续操作
      state.currentUser = action.payload;
      toast.success("Sign Up Successfully")
    },
    registerFailure: (state) => {
      state.isFetching = false;
      state.error = true;
      // 优化提示：注册失败的原因更贴合场景，而非复用登录的错误提示
      toast.error("Registration failed, please check your input")
    },
    logout: (state) =>{
      state.currentUser = null
    }

  },
});

export const { loginStart, loginSuccess, loginFailure,registerStart, registerSuccess, registerFailure,logout } = userSlice.actions;
export default userSlice.reducer;

额外优化建议 #

• 错误提示精准化：注册失败时的提示不要复用登录的"Invalid username or password"，可以根据后端返回的具体错误（比如用户名已存在、密码长度不够）动态调整提示内容。
• 状态完整性：在registerSuccess中添加state.error = false，避免之前的错误状态残留影响后续操作。
• 异步流程校验：确保你在组件或异步逻辑中，正确按顺序触发registerStart（发起请求前）、registerSuccess（请求成功后）、registerFailure（请求失败后）这三个action。

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