Creando los reducers

Clase 13 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

Resumen

Un action de Redux va a contener dos elementos:

type: para indicar la acción que se va a ejecutar.
payload: es la información que estamos mandando al reducer.

Dentro de los reducers usaremos un switch para separar la lógica por cada tipo de acción que tendremos en Redux.

Kafu De León

student•

:( Me tomó mucho tiempo entender Redux, tuve que volver a reproducir las clases y buscar en internet sobre arreglos y objectos porque no tenía ni idea de porque a veces destructurabas o por qué, y tampoco tenía idea de cómo funcionaban los datos y el estado pero ya por fin entendí.

Gabriel Parrello

student•

Esto es de verdadera ayuda amigo gracias por compartir y por el laburo que hiciste!

Mack Rafael

student•

Esto es genial bro, gracias por el aporte :)

Bruno Amadori

student•

Tercera vez que miro este video y contando...

Santiago Cuello

student•

ah no soy el unico jaja

Kamerr Ezz

student•

la verdad

Raphael Hinostroza

student•

Después de repetir las clases, este es mi resumen:

El Storage es como una base de datos de los estados
El connect permite la conexión entre el componente con el Storage y tiene 2 parámetros. Ejemplo - Connect (Primero,Segundo):

Primero: Envía el estado actual del Storage al componente para que sea utilizado por medio de su props. Para lograrlo, se crea una función que indicará que atributos se quieren utilizar en el componente y luego las asigna a su props. Segundo: Envía al Reduce la acción que hemos encapsulado y que, por alguna razón que aún no entiendo, al ser llamada por el import en el componente se le atribuye su props. Cuando esta acción llega al Reduce, es identificada mediante el Switch por su atributo Type para su ejecución. Luego, el Reduce envía el resultado al Storage para su actualización. Importante: El Reduce también tiene 2 atributos "(state, action)":
- state: Es el estado que el Stage envía al Reduce. Por lo tanto, es el estado que se va a actualizar.
- action: Es la acción encapsulada que fue enviada por el componente al Reduce para que se actualice el estado del Stage.

Espero haberme dejado entender y que a alguien más se sirva para que siga aprendiendo sin muchas dudas en las siguientes clases.

Jhonney Correa

student•

Genial, estuvo muy bueno tu aporte. Muchas gracias por contribuir.

Matías Wasiak

student•

Gracias!

Steven Benjamín Diaz Flores

student•

Mencionar que si les surge un error de que cada item deberia tener una key, es porque no lo estamos mandando en el payload de setFavorite en CarouselItem, con esto lo pueden solucionar:

` const {id, cover, title, year, contentRating, duration } = props

const handleSetFavorite = () => {
    props.setFavorite({
        id,
        cover,
        title,
        year,
        contentRating,
        duration
    })
}

solo es de recibir y enviar el id

Arantxa Giovanna Rosas Del Valle

student•

el problema sigue pasando si escoges dos veces el mismo item porque hay duplicidad de ids. En este caso ¿qué se puede hacer?

Fabián Antonio Salgado Sepúlveda

student•

Corregié ese problema en modificar los key del archivo Home.jsx

<Search />
			{mylist.length > 0 && (
				<Categories title='Mi Lista'>
					<Carousel>
						{mylist.map((item) => (
							<CarouselItem key={`${item.id}_mylist`} {...item} />
						))}
					</Carousel>
				</Categories>
			)}
			<Categories title='tendencias'>
				<Carousel>
					{trends.map((item) => (
						<CarouselItem key={`${item.id}_trends`} {...item} />
					))}
				</Carousel>
			</Categories>
			<Categories title='Originales de PlatziVideo'>
				<Carousel>
					{originals.map((item) => (
						<CarouselItem key={`${item.id}_originals`} {...item} />
					))}
				</Carousel>
			</Categories>

Geovanny Álvarez

student•

Con este video entendí como funciona todo, no es necesario hagan el ejercicio yo solo mire los primeros 30 min y fue suficiente para entender como funcionaba todo Click para ir al video

Espero les sirva de algo

andrés eduardo betancourt bescanza

student•

Esta muy buena su explicacion

Salvador Galliano

student•

Muy Bueno BRO ! 1K GRACIAS

Vicente Daniel Zurita Salas

student•

Para elementos repetidos dentro del array, yo hice lo siguiente , modifiqué el reducer para filtrar si existe ese elemento dentro del state.myList.

 case 'SET_FAVORITE':
      if (state.myList.filter((element) => element.id == action.payload.id).length !== 0) {
        return state;
      }
      return {
        ...state,
        myList: [...state.myList, action.payload],
      };

Jean Carlos Hallak

student•

Gracias ahora voy a tratar de entender esa logica

Joseph Manuel Salen Pantoja

student•

Se me ocurre que otra validación que se puede hacer, es que al añadir el item a myList, ahora el item original mostraría un boton de quitar de myList que sustituya al boton de añadir a la lista.

Andres Rivera

student•

intento mio de entender el proceso de redux

Angel David Castiblanco Sepulveda

student•

Creando reducers en React

En esta ocasión vamos a guardar los favoritos que agreguemos con el boton de añadir a favoritos de nuestra interfaz. Para ello comenzamos creando y exportando la función setFavorite de nuestro archivo de actions:

export const setFavorite = payload =>({ // Retornamos y exportamos la función un objeto
	type: 'SET_FAVORITE', // Este es el nombre/descripción que le vamos a dar a nuestro action
	payload // El payload se le podría llamar como la acción de la UI
})

Con esto ya tendriamos nuestro archivo de actions listo, ahora debemos ir a nuestro ir a nuestro reducers para manejar la información que recibimos.

La función de Reducer recibe dos parametros que son el state y el action. Con eso claro vamos a hacer una validación con switch para añadir elementos a la myList cuando el action sea el de SET_FAVORITE:

NOTA: Recordar que los parametros de state y action los conseguimos mas adelante cuando hagamos el connect con nuestra función setFavorite.

const reducer = (state, action) =>{
	switch(action.type){ // Vamos a validar el type que habimaos mencionado que es como la descripción del action
		case 'SET_FAVORITE'
		return{
			...state, // Desestructuramos la variable state
			myList = [...state.myList, action.payload] // Asignamos nuevos valores a mylist que fueron los que se trajeron del action. Si no desestructuramos la myList se sobrescribiran y no se añadiran nuevos favoritos
		}
		default // Caso por defecto si no cumple el action con ninguno
		return state
	}
}

Ya con estos dos archivos listos nos dirigimos al componente donde tengamos nuestro videoItem

Lo primero que debemos hacer es importar connect y exportar nuevamente pero con la función de connect:

import {connect} from 'react-redux'

...

export default connect(null, mapDispatchToProps)(videoItem) // El primer parametro va null porque no vamos a solicitar props sino vamos a enviarlos

Ahora debemos definir nuestro mapDispatchToProps con nuestro action a enviar*:*

const mapDispatchToProps = {
	setFavorite
}

Para hacer esto también hay que importar setFavorite de actions:

import {setFavorite} from '../actions'

Ya con esto tendriamos que definir nuestra función manejadora que se llamaría handleSetFavorite y la creamos dentro de nuestro componente:

let videoItem = props => {
	let { img, title, etc} = props
	let handleSetFavorite = () => {
		props.setFavorite({img, title, etc})
	}
}

Tatiana Karina Valencia Hernández

student•

Buen aporte, gracias!

Simón Arenas

student•

Se me hizo interesante el 'Snake case', no sabía que tenía un nombre, sólo conocía el Camel Case.

Para quien le interese, hay más tipos de case:

camelCase

Raw: user login count Camel Case: userLoginCount

PascalCase

Raw: user login count Pascal Case: UserLoginCount

snake_case

Raw: user login count Snake Case: user_login_count Snake Case (All Caps): USER_LOGIN_COUNT

kebab-case

Raw: user login count Kebab Case: user-login-count

Artículo completo.

Jose Colmenares

student•

Todo bien. Solo me sale un warning: "backend.js:6 Warning: Each child in a list should have a unique "key" prop."

Oscar Barajas Tavares

Team Platzi•

En la clase de debug aprendemos como hacerlo :D

Nadir Antonio Soza Solis

student•

Ese Warning se debe a que en React cuando defines una lista tienes que asignarle a cada elemento un identificador único.

Jesus Adrian Berrio Valdes

student•

me dice que state.myList is not iterable 😥

William Santiago Alzate Barriga

student•

Nos podrias compartir tu codigo para poder verificar donde puede estar el error.

Mauro Nava

student•

Puedes mostrar tu codigo?

Lo que puede estar pasando es que no estes inicializando el array y no valides su iteracion, que se ejecute solo si tiene un length mayor a 0, o si minimamente tiene la propiedad length.

Otro error comun, es que lo inicalices como objeto, con corchetes

Daniel Ruiz

student•

Aun no entiendo redux, ni su objetivo y mucho menos su funcionamiento

Omar Leal

student•

Redux es una libreria para manejar los estados, React puede hacerlo muy bien por si solo, pero cuando una aplicación va creciendo es ideal usar Redux para delegarle exclusivamente el manejo del estado y usar react para la lógica y crear las interfaces.

Luis Lira

student•

Redux lo que hace es para tener una lugar único desde donde tu información va a consultar y cambiar datos. Esto lo que hace es que podrás pasar entre páginas sin perder la información que ya tienes guardada en ese momento, además de acceder a información desde un componente si necesidad de estar pasando la información entre componentes.

Entiende por "estado de la aplicación" cosas como, si está logueada o no la persona, sus preferencias en su configuración, etc.

Jeferson Velásquez

student•

Me pasé un día completo sin entender un bug, y era solamente que en un archivo había puesto

mylist

y lo correcto era

myList

🤣

Erick Fariñas

student•

jajaja me pasó lo mismo, muchas gracias

Luis Lira

student•

En mi caso como modifiqué el json no podía hacerlo funcionar directamente de la forma que está en el vídeo. Por lo que tuve que hacer algo que se usa en el curso de Redux con Bedu. que fue mapear mis array de listas, entonces que cuando encontrará a "Mi lista", hiciera push del payload a mi array llamado "videos" que contiene la lista.

Si alguien hizo algo similar a lo que yo hice con el JSON y tiene problemas en esta parte, les dejo mi código del reducer :)

case 'SET_FAVORITE':
            
            const newLists = state.lists.map(list => {
                let value = {...list}
                if(list.title === "Mi lista"){
                    list.videos.push(action.payload)
                }
                return value
            })

            return {
                ...state,
                lists: newLists
            }

Andrés Campuzano Garzón

student•

🦄 Acá el código de lo hecho hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/c3f404825c133094620d7aee50774a57dc002a51

Ricardo Medina

student•

Las Actions describen que algo pasó, pero no especifican cómo cambió el estado de la aplicación en respuesta. Esto es trabajo de los reducers.

Alejandro González Reyes

student•

Que diferencia, ahora si entiendo como interactua cada elemento de nuestro componente, para solicitar la ejecución de una acción hacia nuestro store. La carga util es el dato que modifica el estado de la app.

Nelson Gonzalez Escalante

student•

Buenas Prácticas: Muchas cosas no están estandarizadas en Redux, por lo que brinda flexibilidad para personalizar las cosas, pero como la mayoría de nosotros no queremos una solución personalizada para cada pequeño detalle cotidiano, la comunidad tiende a establecer lo que se conoce como "buenas prácticas".

Para separar este tipo de datos de los datos normales, se utiliza la propiedad conocida como "payload". Ahora, sobre qué podemos pasar po "payload" y qué debería estar en el mismo nivel es discutible, pero un estándar popular (recomendado por los documentos oficiales) es "Flux Standard Action" la Acción estándar de flujo que establece que entre los requisitos oficiales puede agregar un "payload" , un "error" o un "metapropierty".

**POR TANTO: **Cualquier información sobre la acción que no sea el "type" o "estado de la acción" debe ser parte del campo de "payload".

Juan Pablo Leyva

student•

A mi me salio el error que decia cada item deberia tener un Key unico.

Esto pasa porque no estamos recibiendo un key en cada CarouselItem, y por lo tanto tampoco estamos enviando un key a myList, entonces ahi es donde nos salta el error.

Adicionalmente, en mi codigo, yo encontre que a lllamar la lista de CarouselItems, no le estaba pasando ningun key ni ningun prop a los CarouselItems de myList en Home, por lo que los items en myList salian con todas sus propiedades undefined .

Todo ésto lo podemos solucionar, siguiendo estos pasos:

Asegurarnos de que estamos enviandole un ID (Key unico) y todas las props que necesitamos a cada CarouselItem que llamamos en myList en Home:

<Categories title='My lists'>
          <Carousel>
            {myList.map((item) => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
</Categories>

Verificar que estamos recibiendo un ID (Key unico) para cada CarouselItem y que estemos definiendo un proptype para ID (Key unico) en la declaracion de CarouselItem (src/components/CarouselItem.jsx):

const CarouselItem = (props) => {
  const { id, cover, title, year, contentRating, duration } = props;

CarouselItem.propTypes = {
  id: propTypes.number,
  cover: propTypes.string,
  title: propTypes.string,
  year: propTypes.number,
  contentRating: propTypes.string,
  duration: propTypes.number,
};

Verificar que estemos enviando un ID (Key unico) a nuestro store en la declaracion de CarouselItem (src/components/CarouselItem.jsx):

const handleSetFavorite = () => {
    props.setFavorite({
      id,
      cover,
      title,
      year,
      contentRating,
      duration,
    });
  };

Espero que a alguien le sirva 😅

Sebastian Castañeda Garcia

student•

Estuve muchísimo tiempo tratando de arreglar un bug y resultó que había escrito myList.lenght en vez de **myList.length **

Pablo Tachella

student•

Que bueno que lo hayas comentado jaja tenia el mismo typo 😅 me ahorraste un buen tiempo 👍

Creando los reducers

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto