How to return the result of a post request?

Question

React

Hello everyone
I'm learning React, I'm writing a small application. Faced such a problem:
when authorizing, I send a post request via axio to the backend. The backend will answer 200 and even return the profile (that's why immediately after the function call, put the output in the console and the profile comes), but this is not displayed / saved anywhere on the frontend. That is, I don’t quite understand how to correctly return the result of the api function to the comonenet Element

display code:

function Login(props) {
    return (
        <div className="Login">
            <form onSubmit={props.args.handleSubmit}>
                <FormGroup controlId="email" bsSize="large">
                    <ControlLabel>Email</ControlLabel>
                    <FormControl
                        autoFocus
                        value={props.args.state.email}
                        onChange={props.args.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={props.args.state.password}
                        onChange={props.args.handleChange}
                        type="password"
                    />
                </FormGroup>
                <Button
                    block
                    bsSize="large"
                    disabled={!props.args.validateForm()}
                    type="submit"
                >
                    Login
                </Button>
            </form>
        </div>
    );
}
export default Login

Component logic code:

export default class LoginContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: "",
            password: ""
        };
    }
    validateForm() {
        return this.state.email.length > 0 && this.state.password.length > 0;
    }
    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }
    handleSubmit = event => {
        checkCredentials({"email":this.state.email, "password": this.state.password}, this)
        event.preventDefault();
    }
    render() {
        return (
            <Login args={this}/>
        );
    }
}

CheckCredentials function code:

export function checkCredentials(credentials) {
    const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(credentials),
        url: 'http://localhost/api/login',
        withCredentials: true
    };
    axios(options)
        .then(res => {
            store.dispatch(getProfileSuccess(res.data));
            return res
        })
}

There is no profile data in the editor either (

Please tell me where to look

Answer 1

redux-thunk