React Redux中Alert提示与错误消息显示异常排查

问题根因 #

出现「接口成功/失败时同时弹出成功、错误两类提示」的问题，核心是状态互斥逻辑缺失，具体问题点如下：

• 状态未做互斥清空：当前loginAction的then回调仅触发登录成功的action，catch回调仅触发登录失败的action，但对应的Redux reducer中没有做对立状态的重置：如果上一次请求留存了错误状态，本次请求成功时没有清空错误字段，监听错误状态的提示组件就会和成功提示同时触发；反之如果上一次留存了成功状态，本次请求失败时没有清空成功字段，也会同时弹出两类提示。
• 提示逻辑重复：当前代码在action回调中直接调用了原生alert()，如果项目中同时存在监听Redux状态自动弹出全局提示的逻辑，就会出现原生弹窗、组件弹窗叠加弹出的问题。
• 字段语义设计缺陷：成功、失败两个action都携带了showError字段，没有拆分独立的成功、错误提示标记位，很容易出现状态判断逻辑混乱。

修复方法 #

1. 修改reducer做状态互斥重置，收到对应action时必须清空对立状态，参考代码：

   // 登录模块初始状态
   const loginInitState = {
     token: null,
     errorMsg: null,
     showSuccessTip: false,
     showErrorTip: false
   }
   
   export default function loginReducer(state = loginInitState, action) {
     switch (action.type) {
       case 'SET_LOGIN_SUCCESS':
         return {
           ...state,
           token: action.token,
           showSuccessTip: true,
           // 成功时清空所有错误相关状态
           errorMsg: null,
           showErrorTip: false
         }
       case 'SET_LOGIN_ERROR':
         return {
           ...state,
           errorMsg: action.error,
           showErrorTip: true,
           // 失败时清空所有成功相关状态
           token: null,
           showSuccessTip: false
         }
       default:
         return state
     }
   }
   

2. 统一提示实现逻辑，二选一即可
   • 方案1：删除action中的原生alert()调用，统一由页面/全局提示组件监听Redux中的showSuccessTip、showErrorTip状态弹出对应提示，提示弹出后立即dispatch action把对应标记位设为false，避免重复弹窗。
   • 方案2：保留action中的原生alert，删除所有监听登录状态自动弹提示的组件逻辑。
3. 优化跳转逻辑：不建议直接修改window.location.pathname做硬刷新跳转，硬刷新会中断Redux状态更新流程，容易导致状态异常，建议使用react-router等路由库提供的跳转方法做无刷新跳转。

注：当前代码中成功提示的文本存在拼写错误：Login Sucessfully正确拼写应为Login Successfully，该问题不影响功能，可按需修正。

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