Redux Toolkit中Reducer无法更新导航抽屉状态问题

问题概况 #

点击Header组件的导航图标后，Redux存储的抽屉开关状态无法更新，SideBar组件始终获取到初始值true，无法切换为false。

错误点分析 #

1. SideBar组件错误混合本地state与Redux状态：用useState包裹useSelector的结果，useState仅在组件初始化时赋值一次，后续Redux状态更新不会同步到这个本地变量。
2. Header组件维护双状态源：同时使用本地drawer state和Redux状态，容易导致状态不一致，且点击逻辑冗余。
3. SideBar渲染逻辑写死：className的判断条件硬编码为true，永远只会应用open-nav类。
4. Slice导出冗余动作：导出了未在Slice中定义的closeNav和openNav，属于无效代码。

分步修复 #

1. 修复SideBar组件 #

移除本地useState，直接通过useSelector获取Redux状态，并正确绑定到渲染逻辑：

import { useSelector } from 'react-redux';

function SideBar() {
  // 直接获取Redux中的openDrawer状态
  const { openDrawer } = useSelector((state) => state.util);

  console.log(openDrawer);

  return (
    // 根据实时状态切换className
    <div className={`${openDrawer ? "open-nav" : "close-nav"}`}>
      {/* 侧边栏内容 */}
    </div>
  )
}

2. 修复Header组件 #

移除本地drawer state，直接基于Redux状态执行切换动作，避免双状态源冲突：

import { useSelector, useDispatch } from 'react-redux';
import { drawerOpneClose } from './util'; // 导入对应动作

function Header() {
  const dispatch = useDispatch();
  // 从Redux获取当前抽屉状态
  const { openDrawer } = useSelector((state) => state.util);

  return (
    <img
      src={NavIcon}
      alt=""
      className="icon nav-icon colapse-icon"
      // 点击时直接切换Redux状态的反值
      onClick={() => {
        dispatch(drawerOpneClose(!openDrawer));
      }}
    />
  )
}

3. 修复util.js的Slice定义 #

移除未定义的冗余动作导出，优化状态更新逻辑（Redux Toolkit支持直接修改state，内部通过Immer处理不可变性）：

import { createSlice } from "@reduxjs/toolkit";

const UtilSlice = createSlice({
  name: "util",
  initialState: { openDrawer: true },
  reducers: {
    drawerOpneClose: (state, action) => {
      // 直接修改state，Redux Toolkit会自动处理不可变性
      state.openDrawer = action.payload;
    },
  },
});

export const UtilReducer = UtilSlice.reducer;
// 仅导出Slice中实际定义的动作
export const { drawerOpneClose } = UtilSlice.actions;

核心注意事项 #

• 始终以Redux作为唯一状态源，避免同时使用本地state和Redux状态，防止数据不一致。
• useSelector会自动订阅Redux状态变化，无需额外用useState包裹。
• 动作导出必须与Slice内定义的reducer动作一致，避免无效导出。

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