如何处理 Reducer 中的动作？

Question

如何定位减速器中数组中的哪个元素/对象，我必须将动作传递给？我试图弄清楚我对减速器采取了什么行动。或者我如何更改影响对象中的number 值。所以我在一个带有 TouchableOpacity 的视图中渲染数组，它 onPress 我调用动作调度如下：

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 )

我的减速机：

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 会将id 传递给reducer。但是如何更新减速器中的值？我现在可以不用切换开关。我想了解如何在减速器中传递值并相应地更新。

谢谢。

---

EDIT1：

所以我现在的减速器是：

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

我渲染它的方式是：

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

reducer 中的所有内容都按预期显示。但是当我单击并调用该操作时，出现错误：

Answer 1

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

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":
             const newState = {...state};
             newState[action.payload].nubmer++;
             return newState;

        case "DEC_NUM":
            const newState = {...state};
            newState[action.payload].nubmer--;
            return newState;

        default:
          return state
      }
    }

Answer 2

您的问题似乎出在您的 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++
    }
  }

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