通过RTK控制Material-UI Drawer失效问题及写法差异解析

我尝试使用RTK（Redux Toolkit）控制Material-UI Drawer组件状态时遇到异常，以下是两种写法的对比及问题分析：

第一种失效写法 #

将useSelector获取的nodeDrawerOpened作为参数传入处理函数，调用dispatch切换状态，但Drawer无法正常开关：

export default function NavToolbar(props) {
  const dispatch = useDispatch();
  const nodeDrawerOpened = useSelector(
    state => state.componentStatus.leftDrawerOpened
  );
  const nodeDrawerOpenHandler = (status)=> {
    dispatch(setLeftDrawerOpen(!status));
  };

  return (
    <>
      <Box variant="" className={styles.cntrToolBar}>
        <Grid
          container
          columns={24}
          direction="row"
          justifyContent="center"
          alignItems="center"
        >
          <Grid item xs={1}>
            <Box className={styles.cntrToolBarLeftTools}>
              <IconButton className={styles.toolBarIconBtn}>
                <ListIcon/>
              </IconButton>
            </Box>
          </Grid>
          <Grid item xs={20}>
            <Progressbar/>
          </Grid>
          <Grid item xs={3}>
            <Box className={styles.cntrToolBarRightTools}>
              <IconButton
                className={styles.toolBarIconBtn}
                onClick={() => nodeDrawerOpenHandler(nodeDrawerOpened)}>
                <SimCardDownloadOutlinedIcon />
              </IconButton>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </>
  )
}

第二种正常工作写法 #

移除处理函数的参数，直接在内部使用useSelector获取的最新状态值，Drawer恢复正常：

export default function NavToolbar(props) {
  const dispatch = useDispatch();
  const nodeDrawerOpened = useSelector(
    state => state.componentStatus.leftDrawerOpened
  );

  // ** 修改部分 **
  const nodeDrawerOpenHandler = ()=> {
    dispatch(setLeftDrawerOpen(!nodeDrawerOpened));
  };

  return (
    <>
      <Box variant="" className={styles.cntrToolBar}>
        <Grid
          container
          columns={24}
          direction="row"
          justifyContent="center"
          alignItems="center"
        >
          <Grid item xs={1}>
            <Box className={styles.cntrToolBarLeftTools}>
              <IconButton className={styles.toolBarIconBtn}>
                <ListIcon/>
              </IconButton>
            </Box>
          </Grid>
          <Grid item xs={20}>
            <Progressbar/>
          </Grid>
          <Grid item xs={3}>
            <Box className={styles.cntrToolBarRightTools}>
              <IconButton
                className={styles.toolBarIconBtn}
                onClick={() => nodeDrawerOpenHandler()}> // ** 修改部分 **
                <SimCardDownloadOutlinedIcon />
              </IconButton>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </>
  )
}

原理差异与失效原因 #

两种写法的核心区别 #

• 第一种写法：点击触发时，传递的是当前组件渲染周期内的nodeDrawerOpened旧值。React函数组件每次渲染都会重新生成内部变量，包括处理函数和状态值。由于Redux状态更新是异步触发组件重渲染的，若在重渲染完成前点击，传入的参数会是未更新的旧状态，导致dispatch的新状态与Redux实际存储的状态脱节。
• 第二种写法：处理函数内部直接引用组件当前渲染时通过useSelector获取的最新状态。每次Redux状态更新触发组件重渲染后，nodeDrawerOpened会同步为最新值，处理函数也会重新创建并捕获这个最新值，确保dispatch的反转值永远基于Redux的真实状态。

第一种写法失效的具体原因 #

问题根源是闭包捕获的旧值冲突：
组件首次渲染时，nodeDrawerOpened为初始值（如false），同时创建的nodeDrawerOpenHandler会在闭包中捕获这个初始值。当点击按钮传入当前的nodeDrawerOpened并dispatch后，Redux状态更新，触发组件重渲染，此时新的nodeDrawerOpened变为true，并生成新的处理函数。但如果在组件未完成重渲染时快速点击，触发的会是旧渲染周期的处理函数，传入的也是旧的false，导致dispatchtrue——而此时Redux已经是true，状态没有变化，Drawer自然无法正常关闭。

这种场景下，状态更新的异步性加上闭包捕获的旧值，导致了状态切换逻辑的混乱，最终表现为Drawer无法正常开关。

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