¿Qué es un reducer?

Resumen de la clase:
¿Qué es un reducer?

• Son una herramienta que nos permite declarar todos los posibles estados de nuestra App para llamarlos de forma declarativa.
• Necesitan 2 objetos esenciales: los estados compuestos y las acciones.

Los estados compuestos:

• Son un objeto donde van a vivir como propiedades todos nuestros estados

Acciones

• Responsables, al ser disparados, de pasar de un estado a otro.
• Este objeto tiene 2 propiedades: action type y action payload.

Action type:

• Define el nombre clave para encontrar el nuevo estado.

Action payload:

• Es opcional e importante con estados dinámicos. Un estado es dinamico cuando depende del llamado de un API, de lo escrito por el usuario en un input, etc. Estos son estados dinámicos y los recibimos con un payload.

Flujo de trabajo:

• Definimos distintos tipos de acciones con type y payload.
• Enviamos estas acciones a nuestro reducer.
• El reducer define los posibles estados por donde pasara nuestra App.
• Con action type elegimos cual de esos estados queremos disponer con el cambio o evento del usuario.
• Con action payload damos dinamismo a dicho estado. Será el mismo estado pero le daremos características especiales

Excelente video! Servirá para aquellos que quieran implementar y empezar a usar Redux.

Si que tiene sentido aprender useReducer antes de pensar en redux

¿Qué es un reducer?

Son herramientas para declarar los estados de la aplicación. Usan estados compuestos.

Vamos a manejar acciones:

• Action Type -> qué haremos
• Action Payload -> qué información mandamos (es opcional y sirve para estados dinámicos)

Muy claro el tema. Excelente 😄

Les comparto mis apuntes de este punto del curso.

Aqui tiene un post por si quieren profundizar en el uso de useReducer
https://ewebik.com/react-js/usereducer

Honestamente se esta ruta ha mejorado mucho, repsando conceptos para alguien que va empezando. Lo va a enteder mucho mejor este concepto de Redux que veremos en un futuro no muy lejano, este y con el anterior curso de Patrones de render se han visto los siguientes conceptos que aconsejo aprender:

• HOC(Higher order components)
• reducers.

Antes tenias que aprender primero Vue.js para tener algo más claro acerca de Redux, me alegra tener muchos conceptos más claros.

Lectura recomendada

https://www.w3schools.com/react/react_usereducer.asp

¿Qué es un reducer?
Es una herramienta que nos permite declarar todos los posibles estados de la aplicación para que podamos usarlos de forma muy declarativa.

Los reducers necesitan dos objetos, el primero es el estado compuesto o “compone state“ que son un objeto donde los estados son sus propiedades y solo tenemos una función actualizadora para todos estos estados. El otro objeto son las acciones, que son las que enviamos a nuestro reducer para que podamos actualizar el valor de los estados, estas acciones también son un objeto que tienen dos propiedades:

Action Type: Qué le dice al reducer cuál es nombre clave para encontrar el estado que vamos a modificar.

Action Payload: (Optional) se usa para los estados dinámicos, que son los estados que su nuevo valor depende de otro evento cómo puede ser el llamado a una API, de los que escriban los usuarios en un input, etc.

El flujo sería algo cómo:

Actions → Reducer → New State

Buena definición de un reducer, ahora entiendo más conociendo que se intenta hacer el código más declarativo, manteniendo el manejo de estado y lógica aún más separada del jsx

¿Qué es un reducer?

.
Vamos a utilizar una herramienta React llamada useReducer que es un hook que nos permite manejar nuestro estado de la manera más declarativa posible. Antes de trabajar con ello vamos a tener que trabajar con los reducers.
.
Los reducers son esa herramienta que nos va a permitir declarar todos los posibles estados que pueda tener nuestra aplicación para que podamos llamarlos o trabajarlos de forma muy declarativa.
.
Los reducers necesitan 2 objetos esenciales:
.

• Estados compuestos o Compound states: es decir, objetos que contienen como propiedades a todos nuestros estados, por lo que vamos a tener una sola función actualizadora para cualquiera de nuestros estados.
  .
• Actions: estas acciones son las que van a disparar, son las que vamos a enviarle a nuestro reducer para que podamos pasar de un estado a otro.

.
Estas acciones son un objeto que tienen 2 propiedades:
.

• Action Type: que define cuál es exactamente el nombre clave para encontrar el nuevo estado con el que debemos hacer el cambio en nuestra aplicación.
  .
• Action Payload: es opcional y no lo vamos a necesitar siempre, aunque va a ser importante cuando tengamos estados dinámicos. Estados que no podamos cambiar directamente a valores determinados, sino que dependen de algún llamado a una API, de la captura de algún evento por medio de un input u algún otro tipo de elemento HTML que los vamos a recibir gracias a un payload.

.
El flujo consiste en:
.

• Definir distintos tipos de acciones con types y payloads.
• Las vamos a enviar a nuestro reducer
• El reducer va a definir todos los posibles estados por los que puede pasar nuestra aplicación.

.
El action type nos ayuda a elegir cuál de todos esos estados es el que queremos disponer. Además con actión payload vamos a poderle agregar alguna característica especial.

Mis apuntes de Notion💚

UseState es redux bien hecho