Question

toggleModal（）函数切换本地状态。在调度异步函数后，我想关闭模态。但是我没办法在dispatch中访问类函数。

这个问题可以通过将模态状态移动到商店来解决，但我想将这个值保持在本地的本地。

我尝试将模态值作为道具传递，而我可以使用调度函数中的ownProps访问该值，它是一个只读值。

import React from 'react'
import { connect } from 'react-redux'

class MyComponent extends React.Component {

    constructor(props){
        super(props) 
        this.state = { modal: false }
    }

    onClick() {

        // OPTION (1)
        // reduxFunction is not a promise, so then doesn't work
        this.props.reduxFunction().then(() => {
            this.toggleModal()
        })

        // OPTION (2)
        // This needs to fire after async function
        this.toggleModal()
    }

    // Want to call this function inside dispatch
    toggleModal() {
        this.setState({ modal: !this.state.modal })
    }

    render () {}
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        reduxFunction: () => {
            dispatch('SOME_ASYNC_FUNCTION').then(() => {

                // How to call this function?
                toggleModal()   

                // ownProps is read-only, so can't be solved by passing modal as prop

            })
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AddInstrument)

Answer 1

这是非常高的级别，但您可以从已连接的商店传入道具modalOpen。

然后，在您的组件中，使用componentDidUpdate：

componentDidUpdate(prevProps) {
    if(prevProps.modalOpen === true && this.props.modalOpen === false) {
        this.closeModal()
    }
}

Answer 2

所以我的问题是发送没有返回承诺。

Promise not returning when using mapDispatchToProps

我将调度功能变成了承诺，并且能够使用OPTION 1。

如何在Redux dispatch

2 个答案: