Redux 操作僅適用於 bindActionCreators

Question

我有簡單的 React & Redux 應用程序，但遇到了奇怪的問題。 這里是我項目的主要文件：

Home.js 文件：

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

動作/product.js 文件：

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

減速器/productReducer.js 文件：

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’”在此文件中：reducers/productReducer.js： 20

帶有 mapStateToProps 和 mapDispatchToProps 的 Home.js 文件：

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