Manejar inputs con Reducer

Clase 48 de 57 • Curso de Redux por Bedu

Ciro Villafraz

student•

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

Rene Ismael Barrios Rojas

student•

Mucha razón, imagínate que se tenga un formulario con al menos 10 inputs, pero pues si solo es para mostrar como hacerlo con redux

Daniel Alberto Esquinazi

student•

La forma correcta de hacerlo con redux, es no hacerlo! Esto puede confundir!

Michael Torres Morán

student•

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.

Gustavo Adolfo Rojas Villarroel

student•

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

softdynamic sac

student•

Es mucho mejor, Por mi lado envié todo el evento al action y ahí lo desintegré,

const INITIAL_STATE = {
    tasks: null,
    task: {
      title: "",
      userId: 0
    },
    loading: false,
    error: null
}

    case ON_UPDATE_TASK_FORM:
      const { task } = INITIAL_STATE
      const { name, value } = action.payload.target
      task[ name ] = value
      return { ...state, task: {...task},  error:null };

Martin Satorre

student•

Excelente! otra forma que se me ocurre es:

En el actions:

export const cambioInput = (name, value) => (dispatch) => {
  dispatch({
    type: name,
    payload: value
  })
}

y en el reducer:

case 'cambio_usuario_id':
      return { ...state, usuario_id: action.payload }

 case 'cambio_titulo':
      return { ...state, titulo: action.payload }

los case _se definen igual que los _name de esa manera evitamos tanta logica en el reducer y queda todo un poco mas fácil de leer :)

Paul Cortes

student•

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

Abdiel Ortega

student•

Ya no recordaba esta recomendación de React gracias por compartirlo es de mucha utilidad para manejar formularios.

David Dias

student•

Excelente. Gracias!

Willy David Da Conceicao Lozada

student•

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

Jorge Daniel Pat Navarro

student•

¿Seria bueno usar para esto Redux Form?

Manuel Rivera

student•

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

Yair Vargas

company_admin•

Tengo una duda, es que cuando yo imprimo props en el Comentarios.js me trae todos los estados de los reducers, es decir si quiero ingresar a al com_cargando me toca asi **props.publicacionesReducer.com_cargando ** por ejemplo.

const mapStateToProps=({publicacionesReducer})=>{
return { publicacionesReducer }; }

Pero si estoy en Guardar.js no necesito hacer eso, es decir ya puedo ingresar a los props del tareasReducer, por ejemlpo io hago solo con props.usuario_id en vez de props.tareasReducer.usuario_id

const mapStateToProps=({tareasReducer})=>tareasReducer

No se si sea por como declare el mapStateToProps que para mi es lo mismo en ambas.

Espero alguien me pueda colaborar

Andrés Felipe Eslava Zuluaga

student•

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!

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Frank Antonio Piñin Ato

student•

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

Willy David Da Conceicao Lozada

student•

Todavía lol

jose ortiz

student•

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

José Luis Orozco

student•

lo que se le esta pasando al onChange es el nombre de la función, en otras palabras le estas pasando la definición de la función. Si le pusieras los paréntesis estarías ejecutando la función en cuanto le des a guardar y fallaría. El nombre que le pongas no importa aunque por convención se le pone handle al comienzo del nombre. ejem. handleTitleChange

Shirley Silvana Suarez Startary

student•

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.

jean pierre gabriel nieto acosta

student•

Si hay varias formas, la que yo conseguí se parece mucho a una que está más abajo, diviertete que es un buen reto ingeniartelas para esto

jean pierre gabriel nieto acosta

student•

una ayuda que te doy es que no olvides darles a los inputs un "name", pasé mucho rato en eso y no recordaba que no se los había puesto

Johan García Trejo

student•

Excelente

Dev Iot

student•

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

José Luis Orozco

student•

yo hice algo asi…

en el tareasActions.js

export const changedInput = (name,value) => (dispatch,getState) =>{
    const reducer = getState().tasksReducer;


    const reducer_updated = {
        ...reducer,
        [name]:value
    }
    dispatch({
            type:UPDATE_INPUTS,
            payload:reducer_updated
        })

}

en el tareasReducer.js

case UPDATE_INPUTS:
return action.payload;

y en el Guardar.js

    handleChange = (e)=> {
         this.props.changedInput(e.target.name,e.target.value);
    }

Grace Nikole Avarado

student•

Buen refactoring :D

Claudia Andrea Aparicio Chavez

student•

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

Enrique de Jesus Tun Xix

student•

tendras tu codigo podria ser algo del evento

Eligreg López

student•

A mí sí me deja escribir números pero me pareció raro que también pudiese escribir una e

Carlos Javier Bazan Huaman

student•

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?

Edgar Lopez Arroyo

student•

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">
                <h2>Saving</h2>
                <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)```

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

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

    case ON_UPDATE_TASK_FORM:
      const { task } = INITIAL_STATE
      const { name, value } = action.payload.target
      task[ name ] = value
      return { ...state, task: {...task},  error:null };

// 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;```

export const changedInput = (name,value) => (dispatch,getState) =>{
    const reducer = getState().tasksReducer;


    const reducer_updated = {
        ...reducer,
        [name]:value
    }
    dispatch({
            type:UPDATE_INPUTS,
            payload:reducer_updated
        })

}

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">
                <h2>Saving</h2>
                <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)```

Manejar inputs con Reducer

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación