Redux侧边栏状态值点击后未即时更新，需二次操作才生效的问题求助

我在Redux Store中设置了一个布尔值isExpanded，用来标识侧边栏是否展开。默认值设为false，但首次点击切换按钮时，控制台输出的还是false，按逻辑点击后应该变成true。之前用本地状态时也碰到过这个问题，以为换成Redux（知道状态更新是异步的）用Reducer管理能解决，结果还是不行。

组件中的状态获取与切换逻辑 #

// Fetch redux state
const sidebar = useSelector(state => state.sidebar);
const { isExpanded } = sidebar;

const toggleSidebar = () => {
  dispatch({
    type: TOGGLE_SIDEBAR,
    payload: !isExpanded
  });
  console.log(isExpanded);
}

Sidebar Reducer代码 #

import { TOGGLE_SIDEBAR } from '../types/sidebar.types'

const initialState = {
    isExpanded: false
}

export const sidebarReducer = (state = initialState, action) => {
    switch(action.type) {
        case TOGGLE_SIDEBAR:
            return {
                isExpanded: action.payload
            }

        default:
            return state
    }
}

Store配置代码 #

const reducer = combineReducers({
    sidebar: sidebarReducer
});

const initialState = {

}

const middleware = [thunk];

const store = createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

原因 #

Redux状态更新是异步的，组件里的isExpanded是闭包捕获的旧状态值，dispatch之后立刻console.log拿到的还是更新前的内容，不会同步反映最新状态。这个问题和用本地useState时的情况本质一致，换Redux也没法避开闭包的特性。

解决办法 #

1. 避免在dispatch后立即打印旧状态
   如果要查看最新状态，要么直接用Redux DevTools查看Store里的实时值，要么把打印逻辑放在组件顶层——状态更新会触发组件重新渲染，此时打印的就是最新值：

   const { isExpanded } = sidebar;
   console.log('当前侧边栏展开状态:', isExpanded); // 组件渲染时自动打印最新值
   

2. 优化Reducer的状态计算逻辑
   当前Reducer依赖组件传入的payload更新状态，改成直接基于Store当前状态计算新值，彻底摆脱组件闭包旧值的影响：

   case TOGGLE_SIDEBAR:
       return {
           isExpanded: !state.isExpanded
       }
   

   对应的组件中，dispatch时无需传payload：

   const toggleSidebar = () => {
     dispatch({ type: TOGGLE_SIDEBAR });
   }
   

   这种方式更可靠，状态更新完全由Reducer内部处理，不会受组件端旧值的干扰。

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