Доступ к диспетчеризации внутри функции - PullRequest
Новая
       1

Доступ к диспетчеризации внутри функции

0 голосов
/ 25 сентября 2019

Я хочу, чтобы моя функция ниже, «VerifyEmailResend», имела доступ к двум методам отправки внутри mapDispatchToProps.Как мне это сделать?

VerifyEmailResend () экспортирован, потому что я хочу, чтобы он был доступен для вызова в моем приложении.

Это приложение написано в React с использованием Redux.

Я знаю, что обычно используется метод подключения, но подключение специально для реагирующих компонентов.Есть ли что-то подобное здесь, что мне не хватает? 

import React, { Component, Fragment } from 'react'
import { api } from '../../api'
import { bool, func } from 'prop-types'
import VerifyEmailResent from './VerifyEmailResent'
import VerifyEmailVerified from './VerifyEmailVerified'
import { connect } from 'react-redux'

class VerifyEmail extends Component {
    static propTypes = {
        // has the verify email been resent \\
        verifyEmailResent: bool,
        // have you already verified your email \\
        verifyEmailVerified: bool,
        // set status of verify email \\
        onSetVerifyEmailResent: func.isRequired,
        // set status of the email verified \\
        onSetVerifyEmailVerified: func.isRequired
    }

    resent = () => {
        const { onSetVerifyEmailResent } = this.props
        onSetVerifyEmailResent(false)
    }

    verified = () => {
        const { onSetVerifyEmailVerified } = this.props
        onSetVerifyEmailVerified(false)
    }

    render() {
        const { verifyEmailResent, verifyEmailVerified } = this.props
        return (
            <Fragment>
                {verifyEmailResent && (
                    <VerifyEmailResent action={this.resent} />
                )}
                {verifyEmailVerified && (
                    <VerifyEmailVerified action={this.verified} />
                )}
            </Fragment>
        )
    }
}

const mapStateToProps = state => ({
    verifyEmailResent: state.eventListenerState.verifyEmailResent,
    verifyEmailVerified: state.eventListenerState.verifyEmailResent
})

const mapDispatchToProps = dispatch => ({
    onSetVerifyEmailResent: verifyEmailResent =>
        dispatch({ type: 'VERIFY_EMAIL_RESENT_SET', verifyEmailResent }),
    onSetVerifyEmailVerified: verifyEmailVerified =>
        dispatch({ type: 'VERIFY_EMAIL_RESENT_VERIFIED', verifyEmailVerified })
})

const VerifyEmailResend = () => () => {
    api.user.resendEmailVerification().then(data => {
        if (data.resent) {
            //onSetVerifyEmailResent(true)
        }
        if (data.verified) {
            //onSetVerifyEmailVerified(false)
        }
    })
}

export connect(null, mapDispatchToProps)(VerifyEmailResend)

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(VerifyEmail)

1 Ответ

1 голос
/ 25 сентября 2019

Я не уверен, в чем ты запутался.Но вы можете сделать это: 

const VerifyEmailResend = () => {}
export default connect(null, mapDispatchToProps)(VerifyEmailResend)

В соответствии с тем, что вам нужен именованный экспорт, вы можете сделать это следующим образом: 

export {
  VerifyEmailResend: connect(null, mapDispatchToProps)(VerifyEmailResend)
}

И вы можете импортировать его как обычно: 

import { VerifyEmailResend } from '..'

И в соответствии с вашим комментарием вы можете назвать его следующим образом в зависимости от вашей потребности в поле: 

{ VerifyEmailResend() }

Или как: 

<VerifyEmailResend />
...