您好我正在学习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,
}
}
我的减速机:
导入*作为来自&#39; ../ actiontypes / ActionTypes&#39;的ActionTypes 来自&#39; ../ components / PriceEstimate&#39;的进口价格 从&#39; ../ data / data&#39;
导入数据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}来自一个单独的文件,其中我有一个带有[对象]的JSON。我的想法是,我有{this.props.total}来显示添加价格的实际总数。但是我似乎无法触发按下按钮时其值被添加到之前的状态。从而显示两种状态的总和。
我希望我的解释清楚我的问题,如果不是,我可能会详细介绍
答案 0 :(得分:0)
在我开始之前,如果我在这里误解了任何内容,请随时纠正我,我会进行编辑。
首先,当将回调传递给道具时,您可以使用箭头功能随其发送参数。因此,在您的按钮列表中,以下是您在点击时将相关按钮的价格发送到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,
},
]