Redux状态已更新但React App组件未重新渲染问题求助

问题场景 #

我在App组件的子组件中设置了两个按钮，尽管能正常分发Action且Redux Store已更新，但App组件并未重新渲染。理想状态是点击按钮时添加虚拟名称到数组，根据数组元素数量渲染对应组件。我是React和Redux新手，恳请指出问题所在。

核心问题与修复方案 #

1. 数组渲染的语法错误

App组件中的列表渲染代码存在运算符优先级错误：
原代码：

{panels || [].map((name) => <Panel {...{ name }} />)}

这里||的优先级高于.，实际执行逻辑是：若panels存在则直接返回panels（不会执行map），仅当panels不存在时才会执行空数组的map（无任何输出），完全不符合预期。

修正写法：先处理panels为空的情况，再调用map，同时添加React列表必需的key属性：

{(panels || []).map((name, index) => (
  <Panel key={index} name={name} />
))}

2. Redux Reducer未返回新状态（关键）

Redux要求Reducer必须是纯函数，绝对不能直接修改原State对象/数组，必须返回全新的状态引用。如果你的Reducer中是用push直接修改原数组（比如state.panelItems.push(action.payload)），Redux会判定State未发生变化，不会触发组件重新渲染。

正确的Reducer写法示例：

const initialState = {
  panelItems: []
};

export default function panelReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_PANEL':
      return {
        ...state, // 复制原状态的其他属性
        panelItems: [...state.panelItems, action.payload] // 生成新数组，不修改原数组
      };
    default:
      return state;
  }
}

修正后的完整App.jsx代码 #

import React from "react";
import "./styles.css";
import { Panel } from "./Panel";
import PanelAdder from "./PanelAdder";
import { useSelector } from "react-redux";

export default function App() {
  const panels = useSelector((state) => state.panelItems);

  return (
    <>
      <PanelAdder />
      <div className="cards-container">
        {(panels || []).map((name, index) => (
          <Panel key={index} name={name} />
        ))}
      </div>
    </>
  );
}

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