¿Qué es un reducer? - Platzi

Curso de React.js: Manejo Profesional del Estado

Curso de React.js: Manejo Profesional del Estado

Introducción

Dime cómo manejas el estado y te diré...

Estado y ciclo de vida con React.Component

Nuevo proyecto: códigos de seguridad

Estados simples: React.Component vs. useState

Efectos con useEffect

Métodos del ciclo de vida en React.Component

Estados independientes y compuestos

Estados independientes con useState

¿Dónde actualizar el estado?

Estados compuestos con React.Component

Estados compuestos con useState

Código imperativo y declarativo en React

Estados imperativos con useState

Estados semideclarativos con useState

¿Qué es un reducer?

3 formas de crear un reducer

Estados declarativos con useReducer

Action creators y actionTypes

Manejo del estado en TODO Machine

¿Qué son los estados derivados?

Migración de useState a useReducer en useLocalStorage

Imponer tu visión vs. trabajar en equipo

Próximos pasos

¿Quieres más cursos de React.js?

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

What is UseReducer and why is it important?

UseReducer is a React Hook that is used to manage the state of an application in a more declarative way, providing a structured and efficient method to control state transitions. This tool is ideal for applications with complex state logic or where the actions to be performed need more structure than that provided by useState.

This approach allows you to manage all possible states that your application could have, facilitating its maintenance and scalability. By defining these possible states (or compounds) along with the actions that trigger them, the use of UseReducer becomes a powerful ally in React application development.

How do reducers work in React?

Reducers in React are pure functions that determine how the state of an application changes in response to an action. These functions take the current state and an action, and then return a new state. There are several key elements to consider:

Composite states: In contrast to simple states where each has its own update function (e.g., value, setValue), composite states are stored as properties within a single object, which simplifies state management.
Actions: Actions are objects that describe a change that should happen in the state of the application. They contain two main properties:
- ActionType: A unique identifier that tells the reducer what type of change should be made.
- ActionPayload: An optional property that may contain additional data needed to perform the state update, especially useful when the state depends on external or dynamic data.

How does a reducer define the possible states?

Reducers allow defining in a declarative way all the possible states that an application can go through. This is done by setting various conditions within the reducer to handle each ActionType. Some points to highlight:

Fixed conditions: Through the different ActionType, simple states can be set, such as toggling true or false.
Dynamic states: This is where the ActionPayload becomes relevant, allowing the state to reflect variable information, such as the result of an API call or the value provided by the user in an input.

In short, using UseReducer and reducer logic allows you to have a more structured and maintainable control over the state flow of your React application. If your application presents complex conditions and ramifications in the states, this is a technique that will make your life considerably easier. The practical application of these concepts and tools will be explored in depth in future classes.

Contributions 16

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Max Andy Diaz Neyra

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

Isaac Godinez Cortes

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

César Palma

Si que tiene sentido aprender useReducer antes de pensar en redux

Miguel Ángel Reyes Moreno

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

Luis Alejandro Vera Hernandez

Muy claro el tema. Excelente 😄

Ignacio Basilio

Les comparto mis apuntes de este punto del curso.

Hector Rubio

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

adassive

**#En otras palabras** Un reducer es una función que toma un estado actual y una acción como argumentos, y devuelve un nuevo estado que refleja el resultado de aplicar esa acción al estado actual. En el contexto de Redux, que es un sistema de gestión de estado ampliamente utilizado en aplicaciones web de React, los reducers son funciones puras que definen cómo cambia el estado de la aplicación en respuesta a acciones específicas. Las acciones son objetos que describen un cambio en el estado de la aplicación, y los reducers determinan cómo se deben actualizar los datos en función de esas acciones. Los reducers son una parte clave del principio de "inmutabilidad" en Redux, ya que no modifican directamente el estado existente, sino que crean un nuevo estado basado en el estado actual y la acción.

Paolo Joaquin Pinto Perez

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.

Nelson Gonzalez Escalante

Lectura recomendada

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

Rubén Ernesto Aragón Gil

Rodrigo Andres Ramírez Aguirre

¿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

Johnner Alexander Gambacica Ortiz

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

Harold Zurita Simon

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

Charles Duck Castillo Rosas

Mis apuntes de Notion💚

Andres Felipe Garcia Pedreros

UseState es redux bien hecho