Manejar inputs con Reducer

A mi parecer usar Redux para manejar el estado de los inputs es matar un mosquito con una bola de cañón. Para eso podemos usar el estado interno del componente. Pero entiendo que el objetivo es enseñar cómo hacerlo con Redux

Reduciendo un poco la cantidad del codigo y aplicando ciertos conceptos del curso de React, se podría realizar de la siguiente manera:

Componente para añadir tareas:

handleChange = e => {
    this.props.handleInput(e);
};

Actions

exportconst handleInput = e => (dispatch, getState) => {
    const { name, value } = e.target;
    const { task } = getState().tasksReducer;

    const newTask = { ...task, [name]: value };
    dispatch({ type: SET_TASK, payload: newTask });
};

Reducer

case SET_TASK:
      return { ...state, task: action.payload };

Al realizarlo de esta manera estamos obviando utilizar un action para cada input.

Logré disminuir un poco la cantidad de código de esta manera:
para el componente añadir tareas:

  inputHandler = event => {
    const { name, value } = event.target;
    this.props.updateValue(name, value);
  };

en el actions:

export const updateValue = (name, value) => dispatch => {
  const data = {
    name,
    value
  };
  dispatch({
    type: UPDATE_VALUE,
    payload: data
  });
};

Y finalmente en el reducer:

    case UPDATE_VALUE:
      if (action.payload.name === "userId") {
        console.log("im here");
        return { ...state, userId: action.payload.value };
      } else {
        return { ...state, title: action.payload.value };
      }

Excelente, pero si estoy de acuerdo con que es mucho código para un formulario, ya que tocaría hacer cada cosa especifica para cada input, me parece algo muy tedioso, mejor optimizar
como lo dice la documentación de react

1. Al tareasReducer le agrego dos atributos al estado inicial usuario_id: ‘’, titulo: ‘’ y creo dos nuevos casos de tipo cambio_usuario_id y cambio_titulo que van a retornar el estado pero con esos atributos del estado por lo que se mande del dispatch

2. Creo dos actions en tareasActions que reciben por parámetro lo que se escribe en el input y realizan los dispatch que van y modifican el estado | usuario_id: ‘’, titulo: ‘’ por lo que escribe el usuario

3. En el componente Guardar.js cuando ocurra un cambio en los inputs los manejamos con manejadores de evento que llama a su action correspondiente mandándole lo que escribió el usuario, y a los inputs le damos como value lo que esta en el estado

Conclusion: controlamos los inputs colocándole como valor lo que este en el input haciendo que lo que esta en el reducer sea única fuente de la verdad del input

¿Seria bueno usar para esto Redux Form?

Para no tener que crear una función para cada input, lo hice de la siguiente manera

// En el AddTasks

    User Id:
        <input
          name="Id"
          onChange={event => this.props.UpdateInput(event)}
          Value={this.props.Id}
          type="number"
        />
        <br /> <br />
        Title:
        <input
          name="Title"
          onChange={event => this.props.UpdateInput(event)}
          value={this.props.Title}
          type="text"
        />

// En el Action Creator de Tasks

export const UpdateInput = event => (dispatch, getState) => {
  const {
    target: { value },
    target: { name }
  } = event;

  const StateReducer = getState().TasksReducer;

  const UpdateState = {
    ...StateReducer,
    [name]: value
  };

  dispatch({
    type: UPDATE_INPUT,
    payload: UpdateState
  });

// En el Reducer Tasks

  case UPDATE_INPUT:
      return action.payload;```

Aunque es la forma en que se usa Redux, puede ser un poco largo la configuración. Pero creo que todo esto está bien visto cómo práctica. Excelente!

Excelente clase. 🙂

Yo aun ando un poco confundido sobre como se comunican cada uno

tengo una duda, por que cuando estoy haciendo referencia a la arrow function en el input, la hago sin usar parentesis? tiene que ver con que el dispatch tiene el mismo nombre?

<input value={this.props.title} onChange={this.cambioTitulo }/>

Pequeña observación, no consideran que ese código de los actions y de las funciones del componente se puede refactorizar y que esa función sean una sola para todos los input, lo pienso porque si tuviésemos 20 inputs por cada uno tendríamos que hacer funciones, no lo veo muy escalable, no se si lo refactorice después pero hasta aquí se me hace mucho código.

Excelente

si el form tuviera 10 campo o mas, se podria juntar todo en una función y no una funcion para cada input?

Me pasa la cosa mas rara. En el usuario_id me deja poner numero solo si antes le pongo una “e” y en el titulo no me deja poner nada.

Si verifico con el console.log me muestra normal los valores que entran

sáquenme de una duda, no se puede enviar todo el formulario al reducer para actualizar todos los campos del estado en lugar de hacerlo uno por uno?

class Guardar extends Component {
    cambioUsuarioId = (event) => {
        this.props.cambioUsuarioId(event.target.value)
    }
    cambioTitulo = (event) => {
        this.props.cambioTitulo(event.target.value)
    }

    render() {
        return (
            <div className="formulario">
                <h1>Saving</h1>
                <label>User ID:</label>
                <input 
                    type="number"
                    value={ this.props.usuario_id }
                    onChange={ this.props.cambioUsuarioId() }
                />
                <label>Titulo:</label>
                <input 
                    type="text"
                    value={ this.props.titulo }
                    onChange={ this.props.cambioTitulo() }
                />
                <button>Save</button>
            </div>
        )
    }
}

const mapStateToProps = ({ tareasReducer }) => tareasReducer

export default connect(mapStateToProps, tareasActions)(Guardar)```