Bienvenido al curso

1

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

2

驴Qu茅 conocimientos me recomiendan para tomar este curso?

Repaso React

3

驴Qu茅 es React y c贸mo funciona?

4

Preparando nuestro entorno de trabajo

5

Creaci贸n de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducci贸n a Redux

11

驴Q煤e es Redux, cu谩ndo usarlo y por qu茅?

Fases de Redux

12

Introducci贸n: las fases de Redux

13

Store

14

Reducers

15

Conexi贸n a un componente

16

Action Creators

17

Redux Thunk

18

Explicaci贸n te贸rica: ciclo completo de Redux

19

Pr谩ctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios as铆ncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir informaci贸n en Redux

26

Introducci贸n Compartir informaci贸n en Redux

27

Par谩metros por URL

28

Compartir Reducer

29

M煤ltiples Reducers

30

Llamando a m煤ltiples reducers en una acci贸n

31

Uso del estado en la acci贸n

32

Evitar segundas b煤squedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validaci贸n compuesta

36

Validaci贸n de errores

37

Modificando respuesta de url

38

Estado con interacci贸n

39

Mostrar componentes din谩micamente

40

Llamadas asincronas din谩micas

41

Props por herencia vs estado

42

Estado compartido

M茅todos HTTP

43

Introducci贸n a m茅todos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando bot贸n

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

脷ltimos detalles

Conclusi贸n

56

Conocimientos adquiridos

57

Qu茅 hacer a continuaci贸n

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Manejar inputs con Reducer

48/57
Recursos

Aportes 17

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渆鈥 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)```