Использование оператора распространения в Redux mapDispatchToProps и SweetAlert2 - PullRequest
Новая
       9

Использование оператора распространения в Redux mapDispatchToProps и SweetAlert2

0 голосов
/ 30 сентября 2018

Когда я включаю 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: неизвестный параметр "show" (sweetalert2.js: 122)

Вопрос: Как правильно использовать ...swal в mapDispachToProps, поэтому вам не нужно индивидуально выбирать создателя действия, которому вы хотите сопоставить отправку?

ПодробнееПолный код 

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

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Вот так: 

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

Обязательно рассмотрите плюсы и минусы стенограммы: https://gist.github.com/heygrady/c6c17fc7cbdd978f93a746056f618552#object-short-hand-version

0 голосов
/ 30 сентября 2018

Просто ты не можешь так поступить.Вы должны отправить действие с объектом или функцией.Для получения дополнительной информации посмотрите на этот документ .

. Правильным способом было бы использовать что-то вроде: 

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