Redux Toolkit布尔值切换功能dispatch未触发问题求助

问题排查与修复方案 #

1. 调用dispatch时未执行action生成函数 #

Redux Toolkit通过createSlice生成的On、Off是action creator函数，必须执行后才能生成符合格式的action对象传入dispatch。你当前的错误写法是直接传入函数本身：

// 错误写法
dispatch(On)

修改为调用形式即可：

// 正确写法
dispatch(On())

需要修改两处位置：toggleDeleteButton函数内的dispatch调用，以及onLongPress回调内的dispatch调用。

2. On reducer未更新状态 #

RTK的reducer支持两种状态更新写法：要么直接修改内置的immer draft状态，要么返回新的状态对象。你当前的On reducer只创建了新状态对象但没有返回也没有修改原state，导致状态不会变更：

// 错误写法
On: (state) => {
  const newToggle = { ...state, enableDeleteButton: true };
  console.log("new toogle", newToggle);
  // 没有返回/修改state，变更不生效
},

修改为和Off对齐的写法即可：

// 正确写法1：返回新状态
On: (state) => {
  return { ...state, enableDeleteButton: true };
},

// 正确写法2：直接修改draft状态（RTK更推荐的写法）
On: (state) => {
  state.enableDeleteButton = true
},

3. 可选检查：确认store注册的reducer key匹配 #

你在useSelector中取值用的是state.toggle.enableDeleteButton，需要确认你全局store配置时，reducer挂载的key为toggle，示例配置如下：

import { configureStore } from '@reduxjs/toolkit'
import toggleReducer from './对应reducer路径'

export const store = configureStore({
  reducer: {
    // 这里的key必须和useSelector里第一层取值的key一致
    toggle: toggleReducer
  }
})

如果此处key不是toggle，需要同步修改useSelector的取值路径。

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