React and Redux Shopping cart, add to cart action

user_16226643 0
Viewed 1231

I am working at a ReactJs and Redux shopping cart. The problem is that the item which I add to cart it is as undefined in the cart and it is not displayed.
Here is the action for add to cart:

export const addToCart = ( { item }) => {
    return (dispatch) => {
        return (
            dispatch({
                type: ADD_TO_CART,
                payload:
                { id: item?.id,
                  name: item?.name,
                  brand: item?.brand,
                  quantity: item?.quantity,
                 }
            })
        )
    }
}

Cart reducer:

const initialState = {
    cart: [],
}

export default function addToCartReducer(state=initialState, action) {
    switch(action.type){
        case ADD_TO_CART:            
            return {
                ...state,
                cart:[...state.cart, { 
                    id: action.payload.id,
                    name: action.payload.name,
                    brand: action.payload.brand,
                    quantity: action.payload.quantity
                    }]
            };
            default:
            return state    
    }
}

And this a fragment of MyComponent:

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

export class MyComponent extends Component {
 render(){
  return(
    <section>
       <button onClick = {()=>this.props.addToCart(this.props.selectedItem)}
         ADD TO CART
       </button>
    </section>
const mapStateToProps = (state) => {
    return {
        selectedItem: filterAttributesSelector(state),
    }
}

export default connect(mapStateToProps, {addToCart})(MyComponent)
  )
 }
}

If I log to the console this.props.selecteditem all the keys are defined. But if I add an item to cart and log it to the console the keys are undefined.
Could you please tell me what it is wrong?
Thank you !

react-redux redux reactjs shopping-cart javascript
1 Answers

You cannot make mapStateToProps in your return , it should cause errors You need to add a mapDispatchToProps to dispatch your actions in your case the "addToCart " action. your code will be like that

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

export class MyComponent extends Component {
 render(){
  return(
    <section>
       <button onClick={()=>this.props.addToCart(this.props.selectedItem)}>
         ADD TO CART
       </button>
    </section>
    )
  }
 }
const mapStateToProps = (state) => {
    return {
        selectedItem: filterAttributesSelector(state),
    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (item) => dispatch(addToCart(item)),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

** Since you send the item so no need to destruct it in your action code should be like this

export const addToCart = (item) => {
    return (dispatch) => {
        return (
            dispatch({
                type: ADD_TO_CART,
                payload:
                { id: item?.id,
                  name: item?.name,
                  brand: item?.brand,
                  quantity: item?.quantity,
                 }
            })
        )
    }
}

user_92515420
Related