App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getRandomAdvice } from './Action';

import './App.css';

class App extends Component {
  state = {
    value: "",
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  handleRandomAdvice = () => {
    this.props.getRandomAdvice();
  }

  defineLabelAdvice = () => {
    if (this.state.value !== '' && this.state.value) {
      return 'This is a advice based on the input:'
    } else {
      return 'This is a random advice';
    }
  }

  render() {
    return (
      <div className="App">
        <div>
          <label>
            Advice:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <button onClick={() =>  this.props.getRandomAdvice(this.state.value)}>
          Advice based on input
          </button>
        </div>

        <div className="random">
          <button onClick={this.handleRandomAdvice}> 
            Random Advice
          </button>
        </div>
        <div>
          {this.props.fetching ?
          <React.Fragment> Is Loading...</React.Fragment> 
           :
           <React.Fragment>
             <h4>{this.props.advice && this.defineLabelAdvice()}</h4>
             <h5>{this.props.advice}</h5>
           </React.Fragment> 
          }
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return ({
    advice: state.advice.randomAdvice,
    fetching: state.advice.fetching,
  })
};

const mapDispatchToProps = (dispatch) => ({
  getRandomAdvice: (randomAdvice) => {
    dispatch(getRandomAdvice(randomAdvice));  
  }
})

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