页面加载时Redux状态未派发，组件挂载触发dispatch无效，关联useMediaQuery

问题根因 #

• 你当前ProjectsList组件的mapStateToProps仅订阅了projects和drawer两个Redux状态分支，未订阅appBar状态分支。当你在useEffect中触发setSiteName更新appBar分支时，当前组件以及渲染站点名称的上层组件没有感知到状态变化，因此不会触发重渲染更新显示内容。
• useMediaQuery的内部实现会在组件初始渲染阶段同步触发一次状态更新，导致父组件提前重渲染，此时useEffect中的dispatch还未执行，渲染拿到的是appBar的默认值Dashboard；后续dispatch执行完成后，因为没有组件订阅appBar状态，不会触发界面刷新，所以会一直显示默认值。
• 导航到其他页面再返回时，路由变化会触发父组件全局重渲染，此时dispatch已经执行完成，重渲染会读取到更新后的站点名称，因此显示正常。

解决方案 #

1. 在渲染站点名称的组件（通常是顶部导航栏组件，或者当前ProjectsList组件）的mapStateToProps中添加对appBar状态的订阅，保证appBar更新时对应组件会触发重渲染：

const mapStateToProps = state => ({
    projects: state.projects,
    drawer: state.drawer,
    // 新增订阅appBar状态
    siteName: state.appBar.state
});

2. 若使用React Hooks写法，可以直接通过useSelector读取appBar状态，自动订阅状态变化触发重渲染。
3. 如果站点名称由父组件统一渲染，确保父组件也订阅了appBar状态，即可在状态更新时自动刷新显示。

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