如何處理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 
     }) 
    } 
    }; 
}; 

一切都在減速是如預期般出現。但是，當我點擊和動作被調用時，我得到一個錯誤：

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

你的問題似乎是在減速和你的國家結構..你不使用的ID，以確定哪些keyval對進行更新。

首先我想修改的初始化狀態是一個對象，並使用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++ 
    } 
    } 

我知道語法是令人費解的，但傳播運算符是很好的簡寫，否則將更難以閱讀。