如何用Redux管理Material UI Drawer状态？点击事件无响应求助

我仔细看了你的代码，发现几个关键问题导致点击事件完全没响应，咱们一步步来修复：

1. Action Creator导入与映射错误 #

你在NavBar.js里导入的是toggleDrawer，但你的actions/creators.js里导出的action creator实际叫drawerToggled——这就导致你dispatch的是一个不存在的函数，Redux根本无法处理状态更新。

修复步骤：

• 修改NavBar.js里的导入语句：

// 替换原来的import
import { drawerToggled } from '../../actions';

• 更新mapDispatchToProps，确保正确映射action：

const mapDispatchToProps = (dispatch) => ({
  toggleDrawer: (open) => dispatch(drawerToggled(open)),
});

2. 事件处理函数被立即执行（而非点击触发） #

这是React事件处理的常见误区：你现在的写法是onClick={toggleDrawer(true)}，这会在组件渲染时就立刻执行函数，而不是等到点击的时候才触发。

修复所有事件绑定：
把所有直接调用函数的地方，改成传递箭头函数（保留函数引用）：

• 菜单按钮的点击事件：

<IconButton className={"menu"} aria-label="Menu" color="white" onClick={() => toggleDrawer(true)}>

• Drawer的关闭事件：

<Drawer classes={{ paper: classes.paper }} open={drawerToggled} onClose={() => toggleDrawer(false)} >

• 侧边栏的点击/按键事件：

<div className={classes.list} role="presentation" onClick={() => props.toggleDrawer(false)} onKeyDown={() => props.toggleDrawer(false)}>

• Drawer内部容器的事件：

<div tabIndex={0} role="button" onClick={() => toggleDrawer(false)} onKeyDown={() => toggleDrawer(false)} className={{ root: classes.root }} >

3. useStyles钩子调用错误 #

你现在写的是const classes = useStyles;，但makeStyles返回的是一个React钩子函数，必须调用它才能拿到正确的样式对象：

const classes = useStyles();

做完这些修改后，点击菜单按钮应该就能正常触发Redux的action，更新drawerToggled状态，Drawer也能正常打开和关闭了——毕竟你之前用React本地状态是正常的，说明UI逻辑没问题，问题全在Redux的映射和事件绑定的细节上。

内容的提问来源于stack exchange，提问作者Denys Ivanenko