Reactjs 如何在redux action creator中调用react组件的函数

我有一个函数在react组件中显示登录通知。它需要在redux action creator中完成网络请求后调用通知功能

这样做的正确方式是什么

Login.js

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.notificationDOMRef = React.createRef();
    }

    onSubmit = (values) => {
        this.props.SignIn(values)
    }

    showNotification(notificationType, notificationTitle, notificationMessage, notificationPosition, notificationContent) {
    this.notificationDOMRef.current.addNotification({
            title: notificationTitle,
            message: notificationMessage,...
        });
    }

    render() {
    //it works fine here.. 
    //this.showNotification('danger', 'Danger', 'Document has been permanently removed', 'top-right')
        return (
            <React.Fragment>
                <ReactNotification ref={this.notificationDOMRef} />
                <div className="login-cover">
                    <div className="login-cover-image" style={{ backgroundImage: 'url("/assets/img/login-bg/login-bg-14.jpg")'}}></div>
                    <div className="login-cover-bg"></div>
                </div>
                <div className="login login-v2">
                    <div className="login-content">
                        <form className="margin-bottom-0" onSubmit={this.props.handleSubmit(this.onSubmit)}>
                            <div className="login-buttons">             
                                <button type="submit" className="btn btn-success btn-block btn-lg">Sign me in</button>
                            </div>
                            <div className="m-t-20">
                                Not a member yet? Click <Link to="/kayitol">here</Link> to register.
                            </div>
                        </form>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

const mapStateToProps = (state) =>{
    const {Auth} = state;
    return {
        Auth
    }
}

export default connect(mapStateToProps, {SignIn})(Login);

---

将回调函数添加到

登录

。比如：

 this.props.SignIn(values, {successCallback: fn, failureCallback: fn})

并修改

登录

export const SignIn= ({username, password}, {successCallback, failureCallback}) => async (dispatch, getState) => {
    try {
        const response = await axios.post('https://localhost:44325/api/auth/authenticate', {username, password});

      if(typeof successCallback === 'function'){
        successCallback();
      }

    } catch (error) {
        alert("Login Failed!")

      if(typeof failureCallback === 'function'){
        failureCallback();
      }
    }
}

或者从action creator返回axios请求，然后直接执行

this.props.SignIn(values).then(()=>....).catch(()=>...);

---

您必须发送操作：

this.props.SignIn(values).then(()=>....).catch(()=>...);