React中NavBar组件在Redux Store更新后未重新渲染问题求助

提交表单更新Redux Store中的points值后，NavBar组件未自动重新渲染展示新值，期望无需刷新页面即可看到更新后的points。

现有代码问题分析 #

1. Reducer初始状态类型不匹配 #

你的pointsReducer初始值设为了空数组[]，但全局初始状态中points是字符串类型的'3100'，这会导致：

• 初始时state.points被reducer覆盖为数组，而非预期的字符串
• 状态类型不一致可能引发useSelector的比较异常，导致组件无法感知状态变化

// pointsRedux.js 错误部分
const pointsReducer = (statePart = [], action) => { // 初始值应为字符串而非数组
  switch (action.type) {
    case UPDATE_POINTS:
      return action.payload;
    default:
      return statePart;
  };
};

2. 表单组件的state初始化逻辑（非核心，但影响体验） #

表单中newPoints的useState仅在组件挂载时用currentPoints初始化，后续Redux中points更新不会同步到newPoints，不过这不是NavBar不更新的直接原因。

修复步骤 #

步骤1：修正Reducer初始状态 #

将pointsReducer的初始值改为与全局初始状态一致的字符串类型，推荐直接复用全局初始值避免重复定义：

// pointsRedux.js 修改后
import { initialState } from './initialState'; // 导入全局初始状态

const pointsReducer = (statePart = initialState.points, action) => {
  switch (action.type) {
    case UPDATE_POINTS:
      console.log('redux', action.payload);
      return action.payload;
    default:
      return statePart;
  };
};

如果无法导入全局初始状态，也可以直接写死初始值：

const pointsReducer = (statePart = '3100', action) => {
  // 原逻辑
};

步骤2：确认Root Reducer组合正确 #

确保rootReducer通过combineReducers将pointsReducer正确映射到points字段：

// rootReducer.js 示例
import { combineReducers } from 'redux';
import pointsReducer from './pointsRedux';
import rewardsReducer from './rewardsRedux';

const rootReducer = combineReducers({
  points: pointsReducer,
  rewards: rewardsReducer
});

export default rootReducer;

步骤3：（可选）优化表单组件的state同步 #

如果希望表单输入框能同步Redux中points的变化，添加useEffect监听currentPoints：

// AddPointsWidget.js 修改后
const AddPointsWidget = () => {
  const currentPoints = useSelector(getAllPoints);
  const [newPoints, setNewPoints] = useState(currentPoints);
  const dispatch = useDispatch();

  // 监听Redux状态变化，同步到表单本地state
  useEffect(() => {
    setNewPoints(currentPoints);
  }, [currentPoints]);

  const handleSubmit = e => {
    e.preventDefault();
    dispatch(updatePoints(newPoints));
  };

  // 原返回逻辑
};

验证修复 #

1. 启动应用，确认NavBar初始显示的points为3100
2. 提交表单修改points值，检查控制台是否打印正确的payload
3. 观察NavBar是否自动更新为新的points值

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