使用Redux时如何将API调用响应（如登录错误信息）传递到组件展示

你当前代码存在逻辑冲突：登录成功返回的用户信息和登录失败的错误信息都存储在authData字段中，会导致状态混淆，建议先调整reducer结构拆分状态，再按以下步骤实现需求：

步骤1：修改reducer逻辑 #

单独拆分错误信息存储字段，避免不同类型状态冲突：

import { AUTH, LOGOUT } from '../constants/actionTypes'

const authReducer = (state = { authData: null, errorMsg: null }, action) => {
   switch (action.type){
      case AUTH:
        localStorage.setItem('profile', JSON.stringify({ ...action?.data }))
        // 登录成功清空之前的错误信息
        return { ...state, authData: action?.data, errorMsg: null };
      case LOGOUT:
        localStorage.clear();
        // 登出同步清空错误
        return { ...state, authData: null, errorMsg: null };
      case "AUTH_FAIL":
        // 登录失败仅更新错误字段，不改动用户信息状态
        return { ...state, errorMsg: action?.data};
      case "CLEAR_AUTH_ERROR":
        // 新增清空错误的action类型，方便手动清除提示
        return { ...state, errorMsg: null };
    default:
        return state;
}
}

export default authReducer; 

步骤2：新增清空错误的action（可选，建议添加） #

在你的auth类action文件中添加如下方法，方便后续手动清除错误提示：

export const clearAuthError = () => ({ type: "CLEAR_AUTH_ERROR" })

步骤3：在组件中获取错误信息，可配合useState实现你需要的[msg, setMsg]使用方式 #

以登录组件为例：

import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { signin, clearAuthError } from '你的action文件实际路径'

const Login = () => {
  const dispatch = useDispatch()
  // 从redux中读取错误信息
  const reduxError = useSelector(state => state.auth.errorMsg)
  // 你需要的本地state hook
  const [msg, setMsg] = useState(null)

  // 监听redux错误变化，同步到本地state
  useEffect(() => {
    if (reduxError) {
      setMsg(reduxError)
      // 可选配置：自动清除错误提示，比如3秒后消失
      const timer = setTimeout(() => {
        setMsg(null)
        dispatch(clearAuthError())
      }, 3000)
      return () => clearTimeout(timer)
    }
  }, [reduxError, dispatch])

  // 登录提交逻辑示例
  const handleSubmit = (e) => {
    e.preventDefault()
    // 提交前先清空之前的错误
    setMsg(null)
    dispatch(clearAuthError())
    dispatch(signin(表单数据, 路由history对象))
  }

  return (
    <div>
      {/* 错误提示展示 */}
      {msg && <div className="error-tip">{msg}</div>}
      {/* 其余登录表单代码 */}
    </div>
  )
}

如果不想改动现有reducer结构，也可以直接读取state.auth.authData判断内容格式，但非常不推荐该写法，会导致后续状态维护逻辑混乱。

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