React.js Redux reducer沒有插入項目

Question

我是React.js和Redux的新手。

我正在嘗試構建一個非常簡單的購物車應用程序。

我想要的是如果您碰到一個物品（ 例如：-banana ），它應該出現在購物車中。

（它應該更改cartReducer.js的狀態）

但是，不是將項目推送到減速器狀態，而是推送了其他內容。

此錯誤的原因是什么？

這是我的代碼。

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);

行動

export const ADD_TO_CART = 'ADD_TO_CART';

export const addToCart=(item) =>{
    console.log("ITEMMMMMMMMMM",item)
    return(
        {

            type:ADD_TO_CART,
            payload:item,
        }  
    )
}

Answer 1

<div key={items.id} onClick={addToCartAction}>會將click事件傳遞給addToCartAction而不是item 。

嘗試這個：

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

Answer 2

您可以更改mapStateToProps嗎

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