Redux布尔值按钮点击仅首次切换生效问题求助

核心问题 #

你在test函数中使用的forceToggle没有实时同步Redux store中的最新状态。如果这个变量不是通过useSelector从store中获取，而是直接引用了初始值或某个未更新的局部变量，判断逻辑就会一直基于旧值运行——首次点击后store状态变为true，但你的forceToggle还是false，导致每次点击都只会分发forceToggleOn，无法触发切换到false的动作。

修复方案 #

1. 确保组件实时获取最新状态

在组件中使用useSelector订阅Redux store的状态变化，保证forceToggle始终是最新值：

import { useSelector, useDispatch } from 'react-redux';
import { toggleActions } from './your-slice-path';

const YourComponent = () => {
  // 从store中实时获取forceToggle状态
  const forceToggle = useSelector((state) => state.activity.forceToggle);
  const dispatch = useDispatch();
  const { forceToggleOn, forceToggleOff } = toggleActions;

  const test = () => {
    forceToggle ? dispatch(forceToggleOff()) : dispatch(forceToggleOn());
  };

  return <button onClick={test}>切换状态</button>;
};

2. 优化Slice代码（可选）

可以将两个独立的reducer合并为一个切换动作，简化逻辑并避免判断出错：

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

export type ToggleState = {
    forceToggle: boolean;
};

const initialState: ToggleState = {
    forceToggle: false,
};

export const toggleSlice = createSlice({
    name: 'activity',
    initialState,
    reducers: {
        // 单个动作直接切换布尔值
        toggleForce: (state) => {
            state.forceToggle = !state.forceToggle;
        },
    },
});

export const { actions: toggleActions, reducer: toggleReducer } = toggleSlice;

对应的点击函数可以简化为：

const test = () => {
  dispatch(toggleActions.toggleForce());
};

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