Как вызвать функцию обратного вызова после действия отправки Redux

Question

Я использую React Redux и создаю функцию для входа в систему, но мне нужно получить обратный вызов после успешного входа в систему и перенаправить пользователя на страницу.

Я пытаюсь передать функцию в качестве параметра, но не работаю.

Как получить возврат после отправки?

Login fun

export const login = (request,cb) => {
           return dispatch => {
                let url = "/api/user/login";
                axios({
                    method: "post",
                    url: url,
                    data: request,
                    config: { headers: { "Content-Type": "multipart/form-data" } }
                })
                    .then(response => {
                        let authState = {
                            isLoggedIn: true,
                            user: response.data
                        };
                        cb();
                        window.localStorage["authState"] = JSON.stringify(authState);
                        return dispatch({
                            type: "USER_LOGIN_FULFILLED",
                            payload: { userAuthData: response.data }
                        });
                    })
                    .catch(err => {
                        return dispatch({
                            type: "USER_LOGIN_REJECTED",
                            payload: err
                        });
                    });
           };
    };

отправка

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);

Answer 1

В вашем соединении отсутствует 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);

Надеюсь, это поможет:)

Answer 2

Если вы используете redux-thunk, вы можете вернуть Promise из вашего async action.

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.

Но я предпочитаю использовать useEffect или componentDidUpdate для этой цели:

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