Redux reducer: am i mutating the state here? - redux

Question

i have a made a calculator app and there's one line (i can see, let me know if there's any thing else) where i think I'm mutating the state and i shouldn't ? (and yes I'm using eval() to do it). is this wrong?
this line
return eval(state.replace(/x/g, '*').replace(/÷/g, '/'))
reducer:
import { NUMBER_BUTTON, EQUALS_BUTTON, CLEAR_BUTTON, DECIMAL_BUTTON } from '../actions'
export default function calc(state = '', action) {
switch (action.type) {
case NUMBER_BUTTON:
return state+=action.value
case DECIMAL_BUTTON:
if(state.indexOf('.') > -1 ){
return state
}
return state+='.'
case EQUALS_BUTTON:
if(state.length > 0){
return eval(state.replace(/x/g, '*').replace(/÷/g, '/'))
}
case CLEAR_BUTTON:
return ''
default:
return state
}
}
component code: for reference
<View style={styles.container}>
<View style={styles.result}>
<Text style={styles.totalText}>{total}</Text>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('1')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>1</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('2')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>2</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('3')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>3</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('4')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>4</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('5')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>5</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('6')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>6</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('7')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>7</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('8')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>8</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number('9')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>9</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number('0')}>
<View style={[styles.button, this.calculatedSize()]}>
<Text style={styles.btnTxt}>0</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => decimal('.')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>.</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' + ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>+</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => number(' - ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>-</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' ÷ ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>÷</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => number(' x ')}>
<View style={[styles.btnMath, this.calculatedSize()]}>
<Text style={styles.btnTxt}>x</Text>
</View>
</TouchableHighlight>
</View>
<View style={styles.row}>
<TouchableHighlight onPress={() => clear()}>
<View style={[styles.btnClear, this.calculatedSize()]}>
<Text style={styles.btnTxt}>C</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => equals()}>
<View style={[styles.btnEquals, this.calculatedEqualsSize()]}>
<Text style={styles.btnTxt}>=</Text>
</View>
</TouchableHighlight>
</View>
</View>

Answer 1

That doesn't look like it. The eval() call seems to be just evaluating the return value of an expression, which should be completely self-contained
Where you are mutating state though, is in these lines:
case NUMBER_BUTTON:
return state+=action.value // <------ mutate
case DECIMAL_BUTTON:
if(state.indexOf('.') > -1 ){
return state
}
return state+='.' // <-------- mutate
The += operator is a no-no. Just change it to a + operator, since you're returning the new state, and all should be fine.