React组件在Redux Store状态变更时未重新渲染的原因排查

你的问题核心在于没有用React-Redux提供的官方方式连接组件与Redux Store，导致组件无法感知Store的状态变化并自动重渲染。

问题出在哪？ #

• 直接调用Layout()或App()函数，只是创建了新的React元素，并不会更新页面上已挂载的组件实例。
• 订阅render()虽能让页面更新，但会强制整个应用重新渲染，还违反了React的渲染规则（渲染函数需为纯函数，不能触发嵌套更新），所以会出现警告。

正确的解决步骤 #

1. 用Provider包裹根组件

在入口文件（如index.js）或App组件中，用React-Redux的Provider包裹整个应用，让所有子组件能访问到Redux Store：

import { Provider } from 'react-redux';
import { store } from './你的文件路径'; // 导入你的store

export default function App() {  
  return (
    <Provider store={store}> {/* 用Provider包裹应用 */}
      <Routes>
        <Route element={<Layout />}>
          <Route path="/1" element={<PublicPage />} />
        </Route>
      </Routes>
    </Provider>
  )
}

2. 在Layout组件中使用useSelector获取状态

用React-Redux提供的useSelector钩子获取Store状态，它会自动订阅状态变化，触发组件重渲染：

import { useSelector } from 'react-redux'; // 导入useSelector

function Layout() {
  // 用useSelector替代直接调用store.getState()
  const name = useSelector(state => state.value);

  console.log(name);

  return (
    <div className="App">
      <div className="header">
        <img className="logo" src="images/logotype.png" alt="logo" />
        <div className="UpperTitle">
          {name}
        </div>
      </div>
    </div>
  )
}

3. 移除手动的store.subscribe调用

React-Redux已处理订阅和重渲染逻辑，删掉这行无效且有问题的代码：

// 删除该行
store.subscribe(() => Layout(), App());

为什么这样能行？ #

• Provider将Store注入React上下文，让所有子组件可访问。
• useSelector会监听你选择的状态片段，当状态变化时自动触发组件重渲染，且仅更新需要变化的组件，性能更优。

修改后，dispatch action更新Store状态时，Layout组件会自动感知变化并更新显示内容，也不会出现任何警告。

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