在 Redux mapDispatchToProps 和 SweetAlert2 中使用 Spread Operator

Question

当我在 mapDispatchToProps 中包含 swal 个动作创建者时

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

this.props.getAnimal() 在被调用时可以正确地调度动作，但是 ...swal 提供的 this.props.showAlert() 在被调用时不会调度动作！

但是，如果我们要替换 ...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的正确方法是什么，这样您就不必单独select操作你喜欢将调度映射到的创作者？

更完整的代码

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

根据文档 return 一个对象，你可以这样使用：

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

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

Answer 2

像这样：

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

一定要考虑shorthand版本的优缺点：https://gist.github.com/heygrady/c6c17fc7cbdd978f93a746056f618552#object-short-hand-version

在 Redux mapDispatchToProps 和 SweetAlert2 中使用 Spread Operator

Using Spread Operator in Redux mapDispatchToProps and SweetAlert2

javascript

reactjs

redux

sweetalert2