使用Redux Toolkit实现开关状态切换功能异常，请求问题排查

别担心，新手遇到这类状态管理的问题太正常了，我帮你梳理出几个关键错误，咱们一步步修复：

1. Redux状态的命名与取值错误 #

你在store.js里把switch reducer的键定义为了switchVal：

reducer: {
  switchVal: switchReducer
}

但在Alarm.js里，你不仅把键名写错成了switchValue（Val vs Value），还直接获取了整个slice对象，而不是对象里的active布尔值。正确的取值方式应该是：

// 直接获取开关的激活状态
const isActive = useSelector((state) => state.switchVal.active);

2. 切换函数的逻辑冗余+参数错误 #

你的toggleSwitchHandler做了多余的判断，还传递了一个未定义的value参数给toggleSwitch动作。实际上你的Redux reducer已经内置了取反逻辑，根本不需要额外判断，直接dispatch动作即可：

function toggleSwitchHandler() {
  dispatch(toggleSwitch()); // 不需要传参，reducer会自动处理取反
}

原来代码里的toggleSwitch(value)中，value完全没定义，这会直接导致报错。

3. 开关组件与状态的绑定+显示逻辑错误 #

你之前把Switch组件的value绑定到了错误的状态值，而且图片和文本的显示逻辑搞反了——当开关激活时，应该展示Alarm_enabled.png和“Alarm is activated”文本，你现在的三目运算符是反过来的。

修正后的完整Alarm.js核心代码 #

import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Switch } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { globalStyles } from '../components/globalStyles';
import { toggleSwitch } from '../components/switch';

function Alarm({navigation}) {
  // 正确获取Redux中的开关激活状态
  const isActive = useSelector((state) => state.switchVal.active);
  const dispatch = useDispatch();
  const alarmEnabled = require('../images/Alarm_enabled.png');
  const alarmDisabled = require('../images/Alarm_disabled.png');

  // 简化的切换处理函数
  function toggleSwitchHandler() {
    dispatch(toggleSwitch());
  }

  return (
    <ScrollView>
      <View style={globalStyles.containerBodyAlarm}>
        <View style={globalStyles.containerMainAlarm}>
          <View style={globalStyles.containerImageAlarm}>
            <Image 
              style={{ width: 130, height: 130, resizeMode: 'contain', marginTop: 20, marginBottom: 10}} 
              source={isActive ? alarmEnabled : alarmDisabled } 
            />
          </View>
          <View style={globalStyles.containerButtonAlarm}>
            <Text style={globalStyles.textButtonAlarm}>{isActive ? 'Alarm is activated' : 'Alarm is deactivated'}</Text>
            <Switch 
              trackColor={{false: '#919190', true: '#000099'}} 
              thumbColor={'#5E5E5D'} 
              value={isActive} 
              onValueChange={toggleSwitchHandler} 
            />
            <Text style={globalStyles.textButtonAlarm2}>{isActive ? 'deactivate' : 'activate'}</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

export default Alarm;

const styles = StyleSheet.create({
  pressed: { opacity: 0.7, },
});

额外小建议 #

你可以把switch.js里的slice name从'alarm'改成'switch'，这样代码的语义会更清晰，和功能对应上。

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