如何处理Reducer中的动作? [英] How to handle action in Reducer?

问题描述

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

How do I target which element/object in array in a reducer I have to pass the action to? I am trying to figure out what action I take on the reducer. Or how do I change affect the number value in the object. So I am rendering the array in a View with TouchableOpacity which onPress Im calling the action dispatch as following:

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

我认为 this.props.incNum(data.id)} 将绑定要更改的 id.并传递 payload: id 会将 id 传递给减速器.但是如何更新减速器中的值?我现在可以不用切换.我想了解如何在 reduder 中传递值并相应地更新.

I think <TouchableOpacity onPress={() => this.props.incNum(data.id)} will bind the id to be changed. And passing the payload: id will pass the id to the reducer. But how do I update the value in the reducer? I can do without the toggle for now. I want to learn about passing the value and updating accordingly in the reduder.

谢谢.

所以我的减速器现在是:

So my reducer now is:

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 中的所有内容都按预期显示.但是当我点击并调用操作时，我收到一个错误:

Everything in the reducer is appearing as expected. But when I click and the action is called, I get an error:

推荐答案

你的 reducer 似乎比它需要的复杂得多，下面是更简单的方法，希望能有所帮助.

your reducer seems to be lot more complex that it needs to be, below is the simpler approach, hope this helps.

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

这篇关于如何处理Reducer中的动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！