如何使用redux工具包切换开/关开关?

Question

我试图实现一个开关，可以打开和关闭，并根据状态显示不同的图像和文本。在教程的帮助下，我做了以下操作:

首先创建store.js:

import { configureStore } from '@reduxjs/toolkit';
import switchReducer from './switch';
export const store = configureStore({
reducer: {
switchVal: switchReducer
}
});

然后创建switch.js

import { createSlice } from '@reduxjs/toolkit';
const switchSlice = createSlice({
name: 'alarm',
initialState: {
active: true
},
reducers: {
toggleSwitch: (state) => {
state.active = !state.active;
},
}
});
export const toggleSwitch = switchSlice.actions.toggleSwitch;
export default switchSlice.reducer;

在App.js中，我导入了{store}并在我的底部标签导航器中进行了包装。

现在开关在Alarm.js中，看起来像这样:

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

function Alarm({navigation}) {
const switchValue = useSelector((state) => state.switchValue);
const dispatch = useDispatch();
const alarmEnabled = require('../images/Alarm_enabled.png');
const alarmDisabled = require('../images/Alarm_disabled.png');
function toggleSwitchHandler() {
if (switchValue == true) {
dispatch(toggleSwitch(value));
} else {
dispatch(toggleSwitch(value));
}
}

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={switchValue ? alarmDisabled : alarmEnabled } />
</View>
<View style={globalStyles.containerButtonAlarm}>
<Text style={globalStyles.textButtonAlarm}>{switchValue ? 'Alarm is deactivated' : 'Alarm is activated'}</Text>
<Switch
trackColor={{false: '#919190', true: '#000099'}}
thumbColor={'#5E5E5D'}
value={switchValue}
onValueChange= {toggleSwitchHandler}
/>
<Text style={globalStyles.textButtonAlarm2}>{switchValue ? 'activate' : 'deactivate'}</Text>
</View>
</View>
</View>
</ScrollView>
);
}
export default Alarm;

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

不幸的是它不起作用。我做错了什么?我很抱歉我的代码写得不好，我不擅长。

Answer 1

初始状态如下:

initialState: {
active: true
},

但是，您可以通过以下操作获得值:

const switchValue = useSelector((state) => state.switchValue);

不存在，它必须是:

const switchValue = useSelector((state) => state.active);

---

function toggleSwitchHandler() {
if (switchValue == true) {
dispatch(toggleSwitch(value));
} else {
dispatch(toggleSwitch(value));
}
}

这里的if没有用处，因为两个调用者都有相同的props。

同样，value不存在，因为您在reducer内部翻转布尔值，不需要参数。

改为:

function toggleSwitchHandler() {
dispatch(toggleSwitch());
}

对当前布尔值

进行反转

Answer 2

您可以创建2个reducer，一个值为true，另一个值为false

import { createSlice } from '@reduxjs/toolkit';
const initialStateValue = {
active: true
}
const switchSlice = createSlice({
name: 'alarm',
initialState: initialStateValue,
reducers: {
toggleOn: (state = initialStateValue) => {
state.active = true;
},
toggleOff: (state = initialStateValue) => {
state.active = false;
}
}
});
export const {toggleOn, toggleOff} = switchSlice.actions;
export default switchSlice.reducer;

获取toggle 的值

const switchValue = useSelector((state) => state.alarm.active);

使用它

function toggleSwitchHandler() {
if (switchValue == true) {
dispatch(toggleOff());
} else {
dispatch(toggleOn());
}
}

Answer 3

setLogin: (state, action) => {
const toggle = (input) => !input;
state.active = toggle(state.active);
},

我有同样的问题，并提出了上述解决方案。:)

Answer 4

你好。

我是偶然看到你的问题的。

我认为比这更简单。

这是真的吗?也许是这样:

switch.js

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
active: true
}
const switchSlice = createSlice({
name: 'alarm',
initialState,
reducers: {
toggleSwitch(state) {
state.active = !state.active;
}
}
});
export const { toggleSwitch } = switchSlice.actions;
export default switchSlice.reducer;

然后在组件调用中:

Alarm.js

...
import { toggleSwitch } from '../store/reducers/switch' // switch.js
import { useDispatch, useSelector } from 'react-redux'
...
export function Alarm({navigation}) {
const dispatch = useDispatch();
const { active } = useSelector(state => state.yourReducer);
const alarmEnabled = require('../images/Alarm_enabled.png');
const alarmDisabled = require('../images/Alarm_disabled.png');

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={active ? alarmDisabled : alarmEnabled } />
</View>
<View style={globalStyles.containerButtonAlarm}>
<Text style={globalStyles.textButtonAlarm}>{active ? 'Alarm is deactivated' : 'Alarm is activated'}</Text>
<Switch
trackColor={{false: '#919190', true: '#000099'}}
thumbColor={'#5E5E5D'}
value={active}
onValueChange= {() => dispatch(toggleSwitch())}
/>
<Text style={globalStyles.textButtonAlarm2}>{active ? 'activate' : 'deactivate'}</Text>
</View>
</View>
</View>
</ScrollView>
);
}

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

因此，您不会在redus中进行更改，而是通过调用调度程序在组件中进行更改。每次状态改变时，这将调用"switch"中的函数然后把它改成相反的值