React集成Redux时点击Add按钮Dispatch()方法无效果问题排查

问题核心原因 #

在Reducer->updown.js中，处理increment和decriment动作时，直接返回数值而非保持原有对象结构，导致state被破坏：

• 初始state是{value:0}，执行return state.value + 1后，state变成纯数字（比如1）
• 后续再触发动作时，state不再包含value属性，状态更新逻辑彻底失效

修复步骤 #

1. 修正Reducer的返回值结构
   修改Reducer->updown.js，保持state为对象结构，通过展开运算符复制原state并更新value：

const initialState = { value: 0 };

const ChangeNumber = (state = initialState, action) => {
    switch(action.type){
        case 'increment': 
            return { ...state, value: state.value + 1 };
        case 'decriment': 
            return { ...state, value: state.value - 1 };
        default: return state;
    }
}
export default ChangeNumber;

2. 确认根组件的Provider配置
   检查index.js，确保用react-redux的Provider包裹整个应用并传入store，否则组件无法连接到Redux状态：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import Store from './Store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={Store}>
    <App />
  </Provider>
);

验证 #

完成上述修改后，点击Add组件的"+"按钮，state.value会正常递增，状态更新生效。

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