在reducer react native中重置颜色值

Question

我的 react native 代码有问题

我想重置我的 rgb 值，但我不知道该怎么做 我有很多尝试修复它们。当我使用

myReducer({WarnaDiganti: 'red', jumlah: -100 * COLOR_INC})

要让“red”的值回到0或负数，还是不行。

我应该怎么做才能解决它？ 感谢您的帮助:)

import React, {useReducer} from 'react';
import {Text, View, Button} from 'react-native';
import ColorCounter from '../components/ColorCounter';

const COLOR_INC = 15;

const reducer = (state, action) => {
    switch(action.WarnaDiganti){
        case 'red':
            return state.red + action.jumlah > 255 || state.red + action.jumlah <= 0 ? state:{...state, red: state.red + action.jumlah};
        case 'green':
            return state.green + action.jumlah > 255 || state.green + action.jumlah < 0 ? state:{...state, green: state.green + action.jumlah};
        case 'blue':
            return state.blue + action.jumlah > 255 || state.blue + action.jumlah < 0 ? state:{...state, blue: state.blue + action.jumlah};
        default:
            return state;
    }

}

const SquareColorReduce = () => {
    const[state, myReducer] = useReducer(reducer, {red: 0, green: 0, blue: 0});
    const {red, green, blue} = state;

    const reset = () => {
        // function with I want to reset the value
    }

    return <View>
        <Text>Random Color Generator</Text>

        <ColorCounter
            color="Merah"
            onInc={() => myReducer({WarnaDiganti: 'red', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'red', jumlah: -1 * COLOR_INC})}
        />
        <ColorCounter
            color="Hijau"
            onInc={() => myReducer({WarnaDiganti: 'green', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'green', jumlah: -1 * COLOR_INC})}
        />
        <ColorCounter
            color="Biru"
            onInc={() => myReducer({WarnaDiganti: 'blue', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'blue', jumlah: -1 * COLOR_INC})}
        />

        <Button 
            onPress={() => reset()}
            title="Reset"
        />
        <View
            style= {{
                height: 150,
                width: 150,
                backgroundColor : `rgb(${red},${green},${blue})` //I want to reset this with the reset button
            }}
        />
        
    </View>
};

export default SquareColorReduce;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

试试这个。我在减速器中添加了一个案例，将所有 rgb 值设置为零。

import React, {useReducer} from 'react';
import {Text, View, Button} from 'react-native';
import ColorCounter from '../components/ColorCounter';

const COLOR_INC = 15;

const reducer = (state, action) => {
    switch(action.WarnaDiganti){
        case 'red':
            return state.red + action.jumlah > 255 || state.red + action.jumlah <= 0 ? state:{...state, red: state.red + action.jumlah};
        case 'green':
            return state.green + action.jumlah > 255 || state.green + action.jumlah < 0 ? state:{...state, green: state.green + action.jumlah};
        case 'blue':
            return state.blue + action.jumlah > 255 || state.blue + action.jumlah < 0 ? state:{...state, blue: state.blue + action.jumlah};
        case 'reduceToZero':
            return {red:0, green:0, blue:0};
        default:
            return state;
    }

}

const SquareColorReduce = () => {
    const[state, myReducer] = useReducer(reducer, {red: 0, green: 0, blue: 0});
    const {red, green, blue} = state;

    const reset = () => {
        myReducer({WarnaDiganti:'reduceToZero'});
    }

    return <View>
        <Text>Random Color Generator</Text>

        <ColorCounter
            color="Merah"
            onInc={() => myReducer({WarnaDiganti: 'red', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'red', jumlah: -1 * COLOR_INC})}
        />
        <ColorCounter
            color="Hijau"
            onInc={() => myReducer({WarnaDiganti: 'green', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'green', jumlah: -1 * COLOR_INC})}
        />
        <ColorCounter
            color="Biru"
            onInc={() => myReducer({WarnaDiganti: 'blue', jumlah: COLOR_INC})}
            onDec={() => myReducer({WarnaDiganti: 'blue', jumlah: -1 * COLOR_INC})}
        />

        <Button 
            onPress={reset}
            title="Reset"
        />
        <View
            style= {{
                height: 150,
                width: 150,
                backgroundColor : `rgb(${red},${green},${blue})` 
            }}
        />
        
    </View>
};

export default SquareColorReduce;