javascript - 在 Redux mapDispatchToProps 和 SweetAlert2 中使用 Spread 运算符

Question

当我将 swal 操作创建者包含在 mapDispatchToProps 中时

    function mapDispatchToProps(dispatch) {
        return {
            getAnimal: (_id) => dispatch(getAnimal(_id)),
            ...swal
        }
    }

this.props.getAnimal() 可以在调用时正确调度操作，但是 this.props.showAlert() 是由 提供的... swal 在调用时不会调度该操作!

但是，如果我们替换 ...swal 展开运算符，结果是:

function mapDispatchToProps(dispatch) {
    return {
        getAnimal: (_id) => dispatch(getAnimal(_id)),
        showAlert: () => dispatch(swal.showAlert()),
        hideAlert: () => dispatch(swal.hideAlert()),
    }
}

我们现在弹出警报对话框(预期行为)，但警报框中没有显示任何文本，并且 JS 控制台显示错误

SweetAlert2: Unknown parameter "show" (sweetalert2.js:122)

问题:在 mapDispachToProps 中使用 ...swal 的正确方法是什么，这样您就不必单独选择操作您想将调度映射到创建者吗？

更完整的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { swal } from 'react-redux-sweetalert2';
import { getAnimal } from '../../actions';

class Animal extends Component {

    ...    

    function mapStateToProps(state) {
        ...
    }

    function mapDispatchToProps(dispatch) {
        return {
            getAnimal: (_id) => dispatch(getAnimal(_id)),
            ...swal
        }
    }

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Animal))

Answer 1

简单来说，你不能那样做。您必须使用对象或函数来调度操作。欲了解更多信息，请查看此doc .

正确的方法是使用类似的东西:

function mapDispatchToProps(dispatch) {
        return {
            getAnimal: (_id) => dispatch(getAnimal(_id)),
            swalAlert: (...swal) => dispatch(swalAlert(...swal)
        }
    }

<小时/>

要根据文档返回对象，请使用如下所示:

const getAnimal = (_id) => dispatch(getAnimal(_id))

export default withRouter(connect(mapStateToProps, { getAnimal, ...swal })(Animal))