React-Redux应用刷新后用户状态重置为null问题求助

问题描述 #

开发基于React-Redux的认证应用时，出现状态持久化异常：登录后用户状态正常，但刷新浏览器后，尽管localStorage中仍保留用户数据，user却被重置为null。该问题是修改useEffect钩子后出现的。

相关代码片段：

修改后的useEffect钩子 #

const [tempCode, setTempCode] = useState(null)
const { user, isSuccess, message } = useSelector((state) => state.auth)

useEffect(() => {
  if (isSuccess && user) {
    dispatch(reset())
    navigate("/")
  } else {
    const queryString = window.location.search
    const urlParams = new URLSearchParams(queryString)
    const codeExists = urlParams.get("code")

    if (codeExists) {
      setTempCode({ code: codeExists })
    }
    dispatch(login(tempCode))
    navigate("/")
  }
}, [tempCode])

Auth切片初始状态 #

const initialState = {
  isSuccess: false,
  user: JSON.parse(localStorage.getItem("user")) || null,
  isLoading: false,
  isError: false,
  message: "",
}

Auth reducer中的reset动作 #

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    reset: (state) => {
      state.isLoading = false
      state.isError = false
      state.isSuccess = false
      state.message = ""
    },
    // 其他reducer逻辑...
  },
})

问题原因 #

1. 不必要的login调用覆盖初始状态：刷新页面后tempCode初始值为null，useEffect进入else分支，直接执行dispatch(login(null))。如果你的login action在接收null参数时会触发登录失败逻辑，进而将user重置为null，就会覆盖初始状态中从localStorage读取的用户数据。
2. setTempCode的异步特性：即使URL中存在code，调用setTempCode后tempCode不会立刻更新，当前一轮useEffect执行时仍为null，还是会执行dispatch(login(null))清空用户状态。
3. 无条件跳转干扰状态初始化：useEffect末尾的navigate("/")会强制页面跳转，导致组件重新挂载，进一步干扰状态的正常初始化流程。

解决方案 #

调整useEffect逻辑，避免无效登录调用 #

修改useEffect，仅在有有效登录凭证且无已登录用户时执行登录逻辑：

const [tempCode, setTempCode] = useState(null)
const { user, isSuccess, message } = useSelector((state) => state.auth)

useEffect(() => {
  // 已有用户直接跳转，不执行后续逻辑
  if (user) {
    navigate("/")
    return
  }

  if (isSuccess) {
    dispatch(reset())
    navigate("/")
    return
  }

  const queryString = window.location.search
  const urlParams = new URLSearchParams(queryString)
  const codeExists = urlParams.get("code")

  if (codeExists) {
    if (!tempCode) {
      setTempCode({ code: codeExists })
    } else {
      // 凭证已准备好，执行登录
      dispatch(login(tempCode))
    }
  }
  // 无凭证时不触发登录，避免传递null重置用户
}, [tempCode, user, isSuccess, dispatch, navigate])

优化login action逻辑 #

确保login action在接收无效凭证时，不修改用户状态：

// 示例login异步action逻辑
export const login = createAsyncThunk(
  'auth/login',
  async (credentials, thunkAPI) => {
    // 无有效凭证直接返回，不更改用户状态
    if (!credentials?.code) {
      return thunkAPI.rejectWithValue('无效登录凭证')
    }
    // 正常登录请求逻辑...
  }
)

控制跳转时机 #

移除无条件的navigate调用，仅在登录成功、已有用户等必要场景下执行跳转，避免组件不必要的重新挂载。

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