Problema com React e Redux

Front-end
, , ,
#1

Olá… estou estudando o React e agora com Redux. Estou tentando fazer um simples exemplo: Onde tenho um input e button, quero digitar um valor no input e ao clicar no botão pegar o valor e somar 1.

Eu consegui fazer:

  • Clicando no botão pegar o valor e exibir em outro lugar.
  • Clicando no botão pegar o valor inicial e somar 1.

Mas quero digitar o valor e ao clicar somar 1;

Tenho o seguinte código:

type.js

export const CLICK_BOTAO = 'CLICK_BOTAO',
             DIGITAR_VALOR = 'DIGITAR_VALOR';

actions.js

import {
     CLICK_BOTAO,
     DIGITAR_VALOR
 } from './types';

const _valor = (valor) => {
    let s =0;
    let t =parseFloat( s + valor)
    return t;
};

export const clickBotao = value => ({
    type: CLICK_BOTAO,
    novoValor: _valor(value)
});

export const digitarValor = ev => ({
    type: DIGITAR_VALOR,
    novoValor: ev.target.value
});

index.js reducers

import {combineReducers} from 'redux';
import clientesReducer from './clientesReducer';

const rootReducer = combineReducers({
    click: clientesReducer
})

export default rootReducer;

clientesReducers.js

import {
    CLICK_BOTAO,
    DIGITAR_VALOR
} from '../actions/types';

const inicial = {
    novoValor: 0
}

export default (state =  inicial, action) => {
    switch(action.type) {
        case CLICK_BOTAO:
            return {
                ...state,
                novoValor: action.novoValor
            };

        case DIGITAR_VALOR:
            return {
                ...state,
                novoValor: action.novoValor
            };
        default:
            return state;
    }
};

Aplicacao.js

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions/index";

class Aplicacao extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputValue: 0
    };
  }

  inputChange = event => {
    this.setState({
      inputValue: this.props.digitarValor(this.props.novoValor) 
    }, ()=>{
      console.log(this.state.inputValue);
    });
  };

  soma = () => {
    this.setState({
      inputValue: this.state.inputValue + 1
    }, () => {
          this.props.clickBotao(this.state.inputValue)
          console.log(`--- ${this.state.inputValue}`);
    }
    );

  }

  render() {
    const { novoValor, digitarValor: onChange } = this.props;

    return (
      <div className="App" style={{ padding: "20px" }}>
        <input
          onChange={onChange}
          type="text"
          value={novoValor}
        />
        <button onClick={this.soma}>
          Clique aqui
        </button>
        <h1>{novoValor}</h1>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  novoValor: state.click.novoValor
});

export default connect(
  mapStateToProps,
  actions
)(Aplicacao);

O que deve alterar para ter o resultado que quero?