Question

我有一个计算器应用程序，有一行（我可以看到，让我知道，如果还有其他的东西），我认为我正在改变状态，我不应该？（是的，我正在使用eval（）来做）。这是错的吗？这一行

     return eval(state.replace(/x/g, '*').replace(/÷/g, '/'))

减速器：

 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
  }
}

组件代码：供参考

  <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

看起来不像。 eval()调用似乎只是评估表达式的返回值，该表达式应该是完全自包含的

虽然突变状态，但是在这些行中：

case NUMBER_BUTTON:
  return state+=action.value // <------ mutate
case DECIMAL_BUTTON:
  if(state.indexOf('.') > -1 ){
    return state
  }
  return state+='.' // <-------- mutate

+=运算符是禁止运行的。只需将其更改为+运算符，因为您将返回新状态，并且一切都应该没问题。

Redux减速机：我在这里改变状态吗？

1 个答案: