自定义React Switch组件无法响应Redux状态变更求助

核心问题：Redux Reducer未正确返回新State #

你的组件无法响应currentView变化的最可能原因是Redux Reducer中直接修改了原State对象，而非返回新的State引用。Redux依赖State的引用变化来触发订阅更新，若Reducer修改原State后返回同一个对象，useSelector会认为State未变化，不会触发组件重渲染。

修复Reducer逻辑 #

确保所有State修改操作都返回新的对象，而非修改原State。例如，处理currentView更新的stateModifiers函数应改为：

// 示例：stateModifiers中更新currentView的正确写法
const stateModifiers = {
  UPDATE_CURRENT_VIEW: (state, action) => {
    // 返回新的State对象，而非修改原State
    return {
      ...state,
      currentView: action.payload
    };
  }
};

辅助优化：Switch组件的稳定性改进 #

虽然核心问题在Reducer，但可以优化Switch组件的实现，避免潜在的渲染问题：

1. 为返回的元素添加唯一key，帮助React/Preact正确识别组件变化
2. 处理未匹配到Case的情况（返回null）

修改后的Switch组件：

import { Fragment, cloneElement } from 'react'

export const Switch = ({ condition, children }) => {
  const childList = Array.isArray(children) ? children : [children];
  const matchedChild = childList.find(child => child?.props.case === condition);
  
  // 为匹配到的元素添加唯一key，确保React正确处理组件切换
  return matchedChild ? cloneElement(matchedChild, { key: matchedChild.props.case }) : null;
}

export const Case = props => {
  return <Fragment>{props.children}</Fragment>;
}

额外检查点 #

• 确认INITIAL_STATE包含currentView字段：确保初始State中有currentView的默认值，比如INITIAL_STATE = { currentView: "view-1" }
• 验证Action Dispatch是否正确：检查触发currentView更新的Action是否被正确dispatch，且Action类型与stateModifiers中的键匹配
• 检查useSelector的路径：确保useSelector(state => state.currentView)正确指向State中的currentView字段，若State有嵌套结构，需调整选择器路径

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