Redux action working only with bindActionCreators

Question

I have simple React & Redux app and I have strange issue. Here the main files of my project:

Home.js file:

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import * as productActions from "../../actions/product";
import { connect } from "react-redux";

class Home extends Component {
    componentWillMount() {
        this.props.actions.getProducts();
    }

    render() {
        const { products, actions } = this.props;
        const cart = products.filter(product => product.addToCart);

        return (
            <div className="home mt-5">
                <div className="row">
                    <div className="col-12">
                        <h2 className="mb-3">Products</h2>
                    </div>
                </div>
                <div className="row mt-3">
                    {products.map(product => (
                        <div key={product.id} className="col-sm-6 col-md-3">
                            <div
                                className="view_details"
                                onClick={() => actions.addToCart(product)}
                            >
                                {product.name}{" "}
                                <u>{product.addToCart ? "Remove" : "Add to Cart"}</u>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="row mt-4">
                    <div className="col-12">
                        <h2 className="mb-3">Cart:</h2>
                        {cart.map(product => (
                            <div key={product.id}>{product.name}</div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({
        products: state.product.products
    }),
    dispatch => ({
        actions: bindActionCreators(productActions, dispatch)
    })
)(Home);

actions/product.js file:

import { FETCH_PRODUCTS_DATA, ADD_TO_CART } from "../types/products";

export const getProducts = () => dispatch =>
    fetch(`data.json`)
        .then(response => response.json())
        .then(response => {
            dispatch({
                type: FETCH_PRODUCTS_DATA,
                payload: response.products
            });
        });

export const addToCart = product => ({
    type: ADD_TO_CART,
    product
});

reducers/productReducer.js file:

import { FETCH_PRODUCTS_DATA, ADD_TO_CART } from "../types/products";

const initialState = {
    products: []
};

export default function(state = initialState, action) {
    switch (action.type) {
        case FETCH_PRODUCTS_DATA:
            return {
                ...state,
                products: action.payload.map(product => ({
                    ...product,
                    addToCart: false
                }))
            };
        case ADD_TO_CART:
            return {
                ...state,
                products: state.products.map(product =>
                    product.id === action.product.id
                        ? { ...product, addToCart: !product.addToCart }
                        : product
                )
            };
        default:
            return state;
    }
}

There are more files that is not neccesry to share with you here. With the code above everything is working as expected, the problem is when I don't use the bindActionCreators method. With the following Home.js file (with mapStateToProps and mapDispatchToProps) only the getProducts action is working well but the addToCart action give me the following error: "Cannot read property 'id' of undefined" in this file: reducers/productReducer.js:20

Home.js file with mapStateToProps and mapDispatchToProps:

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

class Home extends Component {
    componentWillMount() {
        this.props.actions.getProducts();
    }

    render() {
        const { products, actions } = this.props;
        const cart = products.filter(product => product.addToCart);

        return (
            <div className="home mt-5">
                <div className="row">
                    <div className="col-12">
                        <h2 className="mb-3">Products</h2>
                    </div>
                </div>
                <div className="row mt-3">
                    {products.map(product => (
                        <div key={product.id} className="col-sm-6 col-md-3">
                            <div
                                className="view_details"
                                onClick={() => actions.addToCart(product)}
                            >
                                {product.name}{" "}
                                <u>{product.addToCart ? "Remove" : "Add to Cart"}</u>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="row mt-4">
                    <div className="col-12">
                        <h2 className="mb-3">Cart:</h2>
                        {cart.map(product => (
                            <div key={product.id}>{product.name}</div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}


const mapStateToProps = state => {
    return {
        products: state.product.products
    };
};
const mapDispatchToProps = dispatch => {
    return {
        actions: {
            getProducts: () => dispatch(getProducts()),
            addToCart: () => dispatch(addToCart())
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Someone can tell me why?

Thank you!

Answer 1

Here is your error

const mapDispatchToProps = dispatch => {
    return {
        actions: {
            getProducts: () => dispatch(getProducts()),
            addToCart: () => dispatch(addToCart())
        }
    };
};

addToCart accepts 1 argument, product . But when you're not using bindActionCreators , addToCart has no arguments. You're dispatching addToCart{} without any arguments. products === undefined and you have error.

To solve, add argument to addToCart .

const mapDispatchToProps = dispatch => {
    return {
        actions: {
            getProducts: () => dispatch(getProducts()),
            addToCart: (product) => dispatch(addToCart(product))
        }
    };
};