Javascript 分派操作Redux后如何调用回调函数

我使用React-Redux并创建了一个登录函数，但我需要在成功登录后获得回调返回并将用户重定向到页面

我尝试将函数作为参数传递，但不起作用

派送行动后我如何获得退货

提交

---

连接中缺少cb（…）

这是解决办法

handleLogin(e) {
        this.setState({ showLoader: true });
        e.preventDefault();
        const request = new Object();
        if (this.validator.allValid()) {
            request.email = this.state.email;
            request.password = this.state.password;
            this.props.login(request, () => {
                //get callbach here
                this.props.history.push('/my-space/my_views');
            })

            this.setState({ showLoader: false });

        } else {
            this.setState({ showLoader: false });
            this.validator.showMessages();
            this.forceUpdate();
        }
    }
const mapStateToProps = state => {
    return {
        authState: state
    };
};
const mapDispatchToProps = dispatch => {
    return {
        login: (request, cb) => dispatch(login(request, cb))
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

---

希望有帮助：）

如果您使用的是

redux thunk

，您可以从您的

但我更喜欢使用

useffect

或

componentdiddupdate

来实现此目的：

componentDidUpdate(){
  if(this.props.authState.isLoggedIn){
    this.props.history.push('/my-space/my_views');  
  }
}

如果需要具有回调功能的操作，我建议使用该包

安装

npm安装redux酷

用法

从“redux cool”导入{actionsCreator}
const my_callback=（）=>{
log（“你好，我是callback！！！”）
}
const callbackable\u action=actionsCreator.callbackable.EXAMPLE（1,2,3，my\u callback）
console.log（可回调的_操作）
//      {
//类型：“可回调/示例”，
//args:[1,2,3]，
//cb:f（）我的_回调，
//_指数：1
//      }
可回调的_action.cb（）
//“你好，我是回电话！！！”

当我们试图生成一个动作对象时，我们可以将回调函数作为最后一个参数传递

actionsCreator

将进行检查，如果最后一个参数是函数，则将其视为回调函数

---

有关更多详细信息，请参见

我发布了答案，mapDispatchToProps登录中缺少cb：（请求，cb）=>dispatch（登录（请求，cb））是的，我忘了在mapDispatchToProps中添加此参数谢谢

handleLogin(e) {
        this.setState({ showLoader: true });
        e.preventDefault();
        const request = new Object();
        if (this.validator.allValid()) {
            request.email = this.state.email;
            request.password = this.state.password;
            this.props.login(request, () => {
                //get callbach here
                this.props.history.push('/my-space/my_views');
            })

            this.setState({ showLoader: false });

        } else {
            this.setState({ showLoader: false });
            this.validator.showMessages();
            this.forceUpdate();
        }
    }
const mapStateToProps = state => {
    return {
        authState: state
    };
};
const mapDispatchToProps = dispatch => {
    return {
        login: request => dispatch(login(request))
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

handleLogin(e) {
        this.setState({ showLoader: true });
        e.preventDefault();
        const request = new Object();
        if (this.validator.allValid()) {
            request.email = this.state.email;
            request.password = this.state.password;
            this.props.login(request, () => {
                //get callbach here
                this.props.history.push('/my-space/my_views');
            })

            this.setState({ showLoader: false });

        } else {
            this.setState({ showLoader: false });
            this.validator.showMessages();
            this.forceUpdate();
        }
    }
const mapStateToProps = state => {
    return {
        authState: state
    };
};
const mapDispatchToProps = dispatch => {
    return {
        login: (request, cb) => dispatch(login(request, cb))
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

The function called by the thunk middleware can return a value,
that is passed on as the return value of the dispatch method.
In this case, we return a promise to wait for.
This is not required by thunk middleware, but it is convenient for us.

componentDidUpdate(){
  if(this.props.authState.isLoggedIn){
    this.props.history.push('/my-space/my_views');  
  }
}