Javascript React.js Redux reducer不插入该项

我是React.js和Redux的新手

我正在尝试构建一个非常简单的购物车应用程序

我想要的是，如果你点击一个项目（如：-香蕉），它应该出现在购物车

（它应该更改cartReducer.js的状态）

但它并没有将该项推送到reducer状态，而是推送其他内容

这个错误的原因是什么

这是我的密码

cartReducer

import {ADD_TO_CART} from '../actions/index'

const initialState =[

]

export default (state = initialState,action)=>{
  console.log("ACTION PAYLOAD",action.payload)
  switch(action.type){
    case ADD_TO_CART:
    return[...state,action.payload]
    default:
    return state
  }
}

项目组件

import React, { Component } from "react";
import { connect } from "react-redux";
import {addToCart} from '../../actions/index'

export class Etem extends Component {
  showItems = () => {
    const { items, addToCartAction } = this.props;
    console.log("ITEMS", items);
    return items.map(items => <div key={items.id} onClick={addToCartAction}>{items.name}</div>);
  };

  render() {
    return (
      <div>
        <h1>Items</h1>
        <div>{this.showItems()}</div>
      </div>
    );
  }
}

// export default items;

const mapStateToProps = reduxState => ({
  items: reduxState.items
});

const mapDispatchToProps = dispatch => ({
  addToCartAction: item => dispatch(addToCart(item))
});

export default connect(mapStateToProps, mapDispatchToProps)(Etem);

这将把单击事件传递到

addToCartAction

而不是

项

试试这个：

return items.map(item => (
  <div key={item.id} onClick={() => addToCartAction(item)}>
    {item.name}
  </div>
));

返回items.map（item=>(
addToCartAction（项目）}>
{item.name}
));

这将把单击事件传递到

addToCartAction

，而不是

项

试试这个：

return items.map(item => (
  <div key={item.id} onClick={() => addToCartAction(item)}>
    {item.name}
  </div>
));

返回items.map（item=>(
addToCartAction（项目）}>
{item.name}
));

您可以更改MapStateTops吗

const mapStateToProps = reduxState => ({
  items: reduxState.cartReducer.items
})

---

你能更改MapStateTops吗

const mapStateToProps = reduxState => ({
  items: reduxState.cartReducer.items
})

---

你能展示你的组合仪表吗？你能展示你的组合仪表吗？