如何在react-redux中的mapDispatchToProps中调度多个动作

Question

mapDispatchToProps中有三个函数.我想在React Component的构造函数中使用它们中的任何函数但是当我使用console.log(this.props)它时给出undefined如何在构造函数中使用这些函数从firebase数据库加载数据？

mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
    return {
        addProductRequest: (data) => {
            console.log(data)
            dispatch(AddNewProduct(data))
        },
        loadProducts: () => {
            dispatch(ViewProducts())
        },
        loadStores: () => {
            dispatch(ViewStores())
        },
    }
}

构造函数

constructor() {
    super();
    this.state = {
        products: [],
        stores: [],
        currentProduct: [],
        stockAvailable: [],
        productName: '',
        description: '',
        qty: 0,
        unitPrice: 0,
        storeName: '',
        selectedProduct: '',
        productNameInStock: '',
        productQtyInStock:0
    }
    console.log(this.props)

    this.props.loadProducts();
    this.props.loadStores();

    this.submit = this.submit.bind(this);
    this.inputHandler = this.inputHandler.bind(this);
}

它给出了一个错误

未捕获的TypeError:无法读取未定义的属性"loadProducts"

Answer 1

你会使用bindActionCreatorsfrom redux,fe:

const mapDispatchToProps = (dispatch) => {
    return {
        ...bindActionCreators({ loadProducts, loadStores }, dispatch)
    }
}

在这种情况下,您将能够通过this.props.loadProducts()组件创建操作.