React应用在Redux Store更新时未重新渲染问题求助

你的代码存在核心问题：直接调用store.getState()获取状态，无法让组件订阅Redux Store的变化。虽然点击按钮后Store内的state确实更新了（从控制台输出能验证），但组件没感知到状态变化，自然不会重新渲染更新界面。

修复方案 #

使用react-redux提供的useSelector钩子获取状态，它会自动让组件订阅Store的状态变化，一旦状态更新，组件就会同步重新渲染。

修改后的App.js代码：

import './App.css';
import { useDispatch, useSelector } from 'react-redux';

function App() {
  const dispatch = useDispatch();
  // 通过useSelector订阅并获取Store状态
  const count = useSelector(state => state);

  const handleIncrease = () => {
    console.log("+");
    dispatch({
      type : 'aumentar'
    })
  }
  const handleDecrease = () => {
    console.log("-");
    dispatch({
      type : 'restar'
    })
  }
  return (
    <div className="App">
      <h1>Contador</h1>
      {/* 渲染订阅到的状态 */}
      <h3>{count}</h3>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  );
}

export default App;

原因说明 #

• useSelector是react-redux专门用于提取Store状态的钩子，组件挂载时它会自动订阅Store；当Store状态变化时，会重新计算提取的状态值，若值发生改变则触发组件重新渲染。
• 直接调用store.getState()仅能获取调用瞬间的状态值，组件不会监听后续的状态变更，因此状态更新后界面无法同步。

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