Problem with React and Redux

Question

Hi... I’m studying React and now Redux. I’m trying to make a simple example: Where I have an input and button, I want to enter a value in the input and when clicking the button take the value and add 1.

I managed to make:

• Click on the button to pick up the value and display elsewhere.
• Click on the button to take the initial value and add 1.

But I want to enter the value and click add 1;

I have the following code:

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

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

What should change to get the result I want?

Answer 1

Alex, okay? Dude, I made the code and attached it to Github to make your life easier. This is the link (https://github.com/victorhermes/SomarNumerosReact)

A tip that I give you when developing, is to paste the files related to Redux (actions, reducers, sagas and configuration files) all inside a store folder, thus becoming more organized. Going back to your code, the only thing I did was to export the function, call the switch next to the SOMAR case, copy all the state with ES6 spread (that would be the ...state), call the initial state (that would be the number inside the INITIAL_STATE) and put the new value that comes by the action (in this case, action.payload.number), finally put + 1 to do the sum. An important detail is to use parseint() to transform the string number to integer.

The end result looks like this:

And adding the javascript increment, we get the result below. That in addition to just add, to each click, makes an increment of more 1.

I hope the code solves your problem :)

Answer 2

This is Alex, all right? Dude, this kind of change is best done inside the Reset. It would look something like this:

Actions

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

// Alterei sua Action aqui e retirei a função de somar valor
export const clickBotao = value => ({
    type: CLICK_BOTAO,
    payload: { value }
});

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

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,
                // Vamos transformar o value em INT
                novoValor: state.novoValor + parseInt(action.payload.value, 0)
            };

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

See if it works and give it a call.