React-Redux：如何根据dispatch类型实现JSX条件渲染？

直接监听dispatch类型并不是Redux推荐的做法——Redux的核心是通过state的变化驱动UI更新，所以我们需要把登录成功/失败的状态存在Redux的store里，再让组件通过mapStateToProps获取这些状态来做条件渲染。结合你给出的actions.js代码，我给你一步步拆解实现方案：

第一步：在Reducer中维护登录状态 #

首先你需要一个处理登录相关action的reducer，用来记录登录是否成功、是否出错等状态。比如创建authReducer.js：

import { LOGIN_SUCCESS, LOGIN_FAIL } from './actions';

// 初始状态
const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null, // 标记是否登录成功
  loginError: false, // 标记是否登录失败
  user: null // 你已经通过load_user获取的用户信息
};

export default function authReducer(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case LOGIN_SUCCESS:
      localStorage.setItem('token', payload.access); // 假设接口返回的token存在payload.access里
      return {
        ...state,
        ...payload,
        isAuthenticated: true,
        loginError: false, // 成功后清空错误状态
        user: payload.user // 如果登录接口直接返回用户信息，这里可以直接赋值，否则等load_user更新
      };
    case LOGIN_FAIL:
      localStorage.removeItem('token'); // 登录失败清空本地token
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loginError: true, // 标记登录失败
        user: null
      };
    default:
      return state;
  }
}

第二步：在组件中获取状态并做条件渲染 #

接下来在你的登录组件里，通过mapStateToProps把刚才定义的状态取出来，然后在JSX里根据状态渲染对应的提示：

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { login } from './actions';

const Login = ({ login, isAuthenticated, loginError, user }) => {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

  const { email, password } = formData;

  const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = async e => {
    e.preventDefault();
    login(email, password);
  };

  return (
    <div className="login-container">
      <form onSubmit={onSubmit}>
        <input
          type="email"
          name="email"
          value={email}
          onChange={onChange}
          placeholder="请输入邮箱"
          required
        />
        <input
          type="password"
          name="password"
          value={password}
          onChange={onChange}
          placeholder="请输入密码"
          required
        />
        <button type="submit">登录</button>
      </form>

      {/* 登录失败时显示错误提示 */}
      {loginError && <div className="error-alert">登录失败，请检查邮箱或密码是否正确！</div>}

      {/* 登录成功时显示欢迎提示 */}
      {isAuthenticated && user && (
        <div className="success-alert">登录成功！欢迎回来，{user.username}！</div>
      )}
    </div>
  );
};

// 从Redux store中取出需要的状态
const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
  loginError: state.auth.loginError,
  user: state.auth.user // 你之前已经通过mapStateToProps获取的用户名
});

// 连接Redux和组件
export default connect(mapStateToProps, { login })(Login);

进阶：显示具体错误信息 #

如果想让错误提示更精准（比如接口返回的具体错误），可以修改actions.js里的LOGIN_FAIL逻辑，把错误信息作为payload传进去：

// 修改actions.js的catch块
catch (err) {
  // 从接口响应中提取错误信息，没有的话用默认提示
  const errorMsg = err.response?.data?.detail || '登录失败，请稍后重试';
  dispatch({ type: LOGIN_FAIL, payload: errorMsg });
}

然后在reducer里把loginError改成存储错误信息：

case LOGIN_FAIL:
  localStorage.removeItem('token');
  return {
    ...state,
    token: null,
    isAuthenticated: false,
    loginError: payload, // 这里存错误信息字符串
    user: null
  };

最后组件里直接渲染错误信息：

{loginError && <div className="error-alert">{loginError}</div>}

这种方式完全符合Redux的数据流设计（Action → Reducer → State → UI），比直接监听dispatch类型更易维护、更易扩展。

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