React / Redux如何通过onClick通过reducer更新组件中的状态，然后在容器中更新它

Question

嗨，我正在学习redux并且正在练习一方面的项目。我一直在努力将动作中的实际信息传递给我的减速器，最终传递给我的状态。希望任何人都可以指出我在哪里弄乱（可能很多地方）。

这是我的按钮列表。

{this.prices.map((item, key) => {
                    // this will store the price and name of clicked item
                    // on the _data object above for use in other components.
                    {this.data._data.itemName = item.name}
                    {this.data._data.itemPrice = item.price}
                    return (
                        <TableRow key = {key} >
                            <TableRowColumn 
                                className="exam-cells">
                                {item.name}

                            </TableRowColumn>
                            <TableRowColumn className="price-cells" >
                                <RaisedButton 
                                    key={item.id}
                                    label={item.price}
                                    primary={true} 
                                    style={style}
                                    type="submit"   
                                    onClick={this.props.addPrices}
                                    />
                                    $ 

现在这些是我的行动（WIP）：

export const addPrices = price => {
console.log(price)
return{
    type: ActionTypes.ADD_PRICES,
}

}

而我的减速机：

导入*作为'../actiontypes/ActionTypes'中的ActionTypes来自'../components/PriceEstimate'的导入价格来自'../data/data'的导入数据

const initialState = [
    {   
        name: '',
        total: 100
    }
]

export default function Action( state=initialState, action ) {

    switch(action.type) {
        case ActionTypes.UPDATE_ESTIMATOR:
            return [
                ...state,
                {
                    total: state[0].total + state[0].total
                }
            ];
        case ActionTypes.CLEAR_TOTAL:
            return [
                {
                    total: 0
                }
            ]
        case ActionTypes.DATA_COMM:
            return [
                {
                    state
                }
            ]
        case ActionTypes.ADD_PRICES:
        return [
            {
                total: state[0].total + {item.prices} ,
        ]

        default: {return state};
    }
}   
  // ideally what I think I need is to add the {item.prices}  

this is my container file:

    return (
      <div className="App">
      <div className="header-container">
        <img src={require('../SmallLogo.png')} alt="logo" id="logo" />
        <div className='price-container'>
          {this.props.total}
        </div>
         { clearComponent }
      </div>
        <div className="main-container">
          { priceComponent }
        </div>
        {/* <aside></aside> */}
      </div>
    );
  };

}

function mapStateToProps (state)  {

  return {
      name: state[0].name,
      total: state[0].total
  };
}

export default connect(mapStateToProps)(App)

{item.price}来自一个单独的文件，其中我有一个带有[objects]的JSON。我的想法是，我有{this.props.total}来显示添加价格的实际总数。但是，当按下按钮时，我似乎无法触发它的值被添加到之前的状态。从而显示两种状态的总和。

我希望我的解释清楚我的问题，如果不是，我可能会详细介绍

Answer 1

在我开始之前，如果我在这里误解了任何内容，请随时纠正我，我会进行编辑。

首先，当将回调传递给props时，您可以使用箭头函数随其发送参数。因此，在您的按钮列表中，您可以通过以下方式将相关按钮的价格发送到addPrices操作：

<RaisedButton
  onClick={() => this.props.addPrices(item.price)}
  // other button props...
/>

接下来，让你的addPrices动作添加price以及它返回的动作对象：

export const addPrices = price => {
  return {
    type: ActionTypes.ADD_PRICES,
    price,
  }
}

然后，在您的reducer中，使用给定操作上的price来相应地更新状态：

case ActionTypes.ADD_PRICES:
  return [
    {
      // don't forget to include the current state when updating it
      ...state[0],

      total: state[0].total + action.price,
    },
  ]