如何在 Redux dispatch 中访问 React 类函数答案

【问题标题】：How to access React class function inside Redux dispatch如何在 Redux dispatch 中访问 React 类函数
【发布时间】：2018-07-04 08:39:06
【问题描述】：

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)

【问题讨论】：

您将在组件中的某处调用reduxFunction。有什么理由你不能在那之后马上打电话给toggleModal？
我更新了代码，但是 this.props.reduxFunction 不是promise，所以它似乎不起作用

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

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

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

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

【讨论】：

我认为这不能解决在调度中访问 this.closeModal() 的问题。当我们调度函数时，componentDidUpdate 不会触发
如果你的 reducer 包含一个 modalOpen 属性，该属性在连接期间作为道具输入

【解决方案2】：

所以我的问题是调度没有返回承诺。

Promise not returning when using mapDispatchToProps

我将 dispatch 函数变成了一个 Promise，并且能够使用 OPTION 1。

【讨论】：

当异步处理程序调用setState时，你应该确保组件没有被卸载，否则会抛出错误。