App.js - Example with React, Redux and Axios API

App.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as appAction from './AppAction';

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.submit = this.submit.bind(this);
        this.updateName = this.updateName.bind(this);

    }

    submit(event) {
        event.preventDefault();
        this.props.appAction.callSayHello(this.props.name);

    }

    updateName(event) {
        this.props.appAction.updateName(event.target.value);
    }


    render() {
        return (
            <div>
                <form onSubmit={this.submit}>
                    <label>
                        Name: <input type="text" id="name" value={this.props.name} onChange={this.updateName} />
                    </label>
                    <button type="submit">submit</button>
                </form>
                <div>Response : {this.props.response}</div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        name: state.name,
        response: state.response

    };
}

function mapDispatchToProps(dispatch) {
    return {
        appAction: bindActionCreators(appAction, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);