Question

如何定位我必须将操作传递给reducer的数组中的哪个元素/对象？我想弄清楚我对减速机采取了什么行动。或者我如何更改会影响对象中的import React, { Component } from 'react'; import { Text, View, TouchableOpacity } from 'react-native'; import { connect } from 'react-redux'; class NewData extends Component { render(){ const renData = this.props.newData.map((data, idx) => { return ( <View key={idx}> <TouchableOpacity onPress={() => this.props.incNum(data.id)} //not sure how to toggel dispatch call above, for onPress > <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text> </TouchableOpacity> </View> ) }); return( <View> {renData} </View> ); } } function mapStateToProps (state) { return { newData: state.newData }; }; //I think I need to create a toggle here: //Something like: this.props.newData.id ? incNum : decNum function mapDispatchToProps (dispatch) { return { incNum: (id) => { dispatch({ type: "INC_NUM", payload: id }) }, decNum: (id) => { dispatch({ type: "DEC_NUM", payload: id }) } }; }; export default connect( mapStateToProps, mapDispatchToProps )( NewData )值。所以我在一个带有TouchableOpacity的视图中渲染数组，其中onPress我调用了动作调度，如下所示：

const initialState = [
      {
        id: '01',
        name: 'Name One',
        number: 11
      },
      {
        id: '02',
        name: 'Name Two',
        number: 22
      },
      {
        id: '03',
        name: 'Name Three',
        number: 33
      }

    ]

export default function newData (state = initialState, action) {
  switch (action.type) {
    case "INC_NUM":
      return {
        ...state,
        number: this.state.number ++ // <== need help here.
      }
    case "DEC_NUM":
      return {
        ...state,
        number: this.state.number --
      }
    default:
      return state
  }
}

我的减速机：

<TouchableOpacity onPress={() => this.props.incNum(data.id)}

我认为id会绑定要更改的payload: id。传递const initialState = { 1: { id: '01', name: 'Name One', number: 11 }, 2: { id: '02', name: 'Name Two', number: 22 } } export default function newData (state = initialState, action) { switch (action.type) { case "INC_NUM": return { ...state, [action.payload]: { ...state[action.payload], number: state[action.payload].number++ <== Line 58 in ERROR screenshot } case "DEC_NUM": return { ...state, [action.payload]: { ...state[action.payload], number: state[action.payload].number-- } default: return state } }会将id传递给reducer。但是如何更新reducer中的值？我现在可以不用切换。我想学习传递值并在reduder中相应更新。

谢谢。

EDIT1：

所以我的减速机现在是：

class NewData extends Component {
  render(){

    const renData = Object.keys(this.props.newData).map((key, idx) => {
      let data = this.props.newData[key]
        return (
        <View key={idx}>
          <TouchableOpacity

            onPress={() => this.props.updateNum(data.id)}
          >
          <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text>
          </TouchableOpacity>
        </View> 
       )
    });

    return(
        <View>
            {renData}
        </View>   
    )
  }
}


function mapDispatchToProps (dispatch) {
  return {
    updateNum: (id) => {
      INC_NUM({
        type: "INC_NUM",
        payload: id
      })
    }
  };
};

我呈现它的方式是：

class SomeAnotherSerializer(serializers.HyperlinkedModelSerializer):

    class Meta:
       model = SomeAnother
       fields = ('pk', 'valueX', 'valueY')


class SomeSerializer(serializers.HyperlinkedModelSerializer):

    some_another = SomeAnotherSerializer()

    class Meta:
       model = Some
       fields = ('pk', 'keyX', 'keyY', 'some_another ')

减速器中的所有东西都按预期出现。但是当我点击并调用该动作时，我收到一个错误：

Answer 1

您的问题似乎出现在您的reducer和您所在州的结构中..您没有使用该ID来确定要更新的keyval对。

首先，我将你的initialState修改为一个对象，并使用id作为你的密钥：

const initialState = {
  1: {name: 'Name One', number: 11},
  2: {name: 'Name Two', number: 22},
  3: {name: 'Name Three', number: 33}
}

然后在你的减速器中：

case "INC_NUM":
  return {
    ...state,
    [action.id]: {
      ...state[action.id], 
      number: state[action.id].number++
    }
  }

我知道语法是错综复杂的，但是扩展运算符是一个很好的简写，否则会更难以阅读。

Answer 2

你的减速机似乎要复杂得多，下面是更简单的方法，希望这会有所帮助。

[1.414, 2]

如何在Reducer中处理动作？

2 个答案: