Действие Redux работает только с bindActionCreators

Question

У меня простое приложение React & Redux, и у меня странная проблема. Вот основные файлы моего проекта:

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

redurs / 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;
    }
}

Есть еще файлы, которыми не нужно делиться с вами здесь. С кодом выше все работает как положено, проблема в том, что я не использую метод bindActionCreators. Со следующим файлом Home. js (с mapStateToProps и mapDispatchToProps) работает только действие getProducts, но действие addToCart выдает мне следующую ошибку: «Не удается прочитать свойство 'id' из undefined" в этом файле: redurs / productReducer. js: 20

Home. js файл с mapStateToProps и 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);

Кто-то может сказать мне, почему?

Спасибо!

Answer 1

Вот ваша ошибка

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

addToCart принимает 1 аргумент, product. Но когда вы не используете bindActionCreators, addToCart не имеет аргументов. Вы отправляете addToCart{} без каких-либо аргументов. products === undefined и у вас есть ошибка.

Чтобы решить, добавьте аргумент к addToCart.

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