CODEWITHSUNDEEP
javascriptreact-native
Isaic02
Isaic02

Reputation: 35

Identifier 'reducer' already declared

On line 7 where reducer is declared, I'm getting the error: "Identifier 'reducer' has already been declared". I'm about to try deleting it and writing it out again piece by piece, but if you see my issue, then let me know!

Thanks!

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

const COLOR_INCREMENT = 15;

const reducer = (state, action) => { 
    // state === { red: number, green: number, blue: number }
    // action === { colorToChange: 'red' || 'green' || 'blue' }

    switch (action.colorToChange) {
    case 'red': 
        return { ...state, red: state.red + action.amount };
    case 'green':
        return { ...state, green: state.green + action.amount };
    case 'blue':
        return { ...state, blue: state.blue + action.amount };
    default:
        return state;
    }
};

const SquareScreen = () => {
    const [state, runMyReducer] = useReducer(reducer, { red 0, green 0, blue 0 });
    const { red, green, blue } = state;

    return (
        <View>
            <ColorCounter 
                onIncrease={() => runMyReducer({ colorToChange: 'red', amount: COLOR_INCREMENT })} 
                onDecrease={() => runMyReducer({ colorToChange: 'red', amount: -1 * COLOR_INCREMENT })} 
                color="Red" 
            />
            <ColorCounter 
                onIncrease={() => runMyReducer({ colorToChange: 'green', amount: COLOR_INCREMENT })} 
                onDecrease={() => runMyReducer({ colorToChange: 'green', amount: -1 * COLOR_INCREMENT })}  
                color="Green" 
            />
            <ColorCounter 
                onIncrease={() => runMyReducer({ colorToChange: 'blue', amount: COLOR_INCREMENT })} 
                onDecrease={() => runMyReducer({ colorToChange: 'blue', amount: -1 * COLOR_INCREMENT })} 
                color="Blue" 
            />
            <View 
                style={{ 
                    height: 150, 
                    width: 150, 
                    backgroundColor: `rgb(${red}, ${green}, ${blue})`
                }} 
            />
        </View>
    );
};

const styles=StyleSheet.create({});

export default SquareScreen;

Upvotes: 0

Views: 111

Answers (1)

Beniamin H
Beniamin H

Reputation: 2086

It's declared in the 1st line:

import React, { reducer } from 'react';

Upvotes: 3

Related Questions