Conceptos claves de Redux

2/22
Recursos
Transcripci贸n

Aportes 14

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

REDUX: Librer脥a nos ayuda a manejar de mejor manera el estado de nuestra aplicaci贸n. Para usarlos se necesita:

  • D贸nde almacenar: Store
  • C贸mo acceder: Mediantes m茅todos, ejempo: selectores.
  • C贸mo actualizar: Disapradores, actions 贸 reducers.

Consta de tres principios:

  • 脷nica fuente de verdad (store)
  • El estado es de solo lectura, no modificarlo directamente sino atraves de actions.
  • Los cambios deben realizarse atrav茅s de funciones puras (reducers)

Funciones Puras caractesristicas:
-Valor de entrada cambia si la entrada cambia.

  • Misma entrada, misma salida.
  • No tener l贸gica s铆ncrona

Al utilizar cualquier tecnolog铆a es importante no solo saber utilizarla, sino porqu茅 la estamos usando y entender la teor铆a.

驴Qu茅 es Redux? -> Es una librer铆a que nos ayuda a manejar el estado de nuestra aplicaci贸n.

Necesitamos 3 cosas:

  • D贸nde almancenar la informaci贸n
  • C贸mo acceder a ella
  • C贸mo actualizarla

Redux est谩 basado en 3 principios:

  1. Hay solo una 煤nica fuente de verdad (store) => La diferencia entre State y Store es que State es un objeto de tipo 鈥榗lave: valor鈥 (aunque puede ser de otros tipos). El Store contiene al State y a otras cosas.
  2. El estado es de solo lectura (solo se actualiza con actions). No debemos modificarlo directamente.
  3. Los cabmios deben realizarse a trav茅s de funciones puras (reducers).

Funciones puras

  • Valor retornado cambia si la entrada cambia.
  • Misma entrada, misma salida.
  • Sin efectos colaterales

Entrada: x -> Funci贸n Pura: f -> Salida: F(x)

Reducers

  • Calcular el nuevo estado basado en los par谩metros (state, action).
  • No modificar el estado directamente.
  • No tener l贸gica as铆ncrona.

Me gusta ver las funciones puras como mecanismos que dan resultados predecibles dados un elemento. Que sin importar cuantas veces metas el mismo datos siempre sera el mismo.

Supongo que por eso se le llama funciones. Porque son resultados que dependen o m谩s bien trabajan en funci贸n de sus datos de entrada.

Redux

Is a library to help us manage the state in our app in [[React]]

Redux need:

  • Where to store our data?
  • How access to our data?
  • How to update our data?

Redux principle

  1. Only a trust source (store)
  2. The state is read only, we need to modify by an Action
  3. The change must be make by pure function(reducer)

The state is an object type {key: value}, and the store contain the state and other datas

A pure function have three characteristic

  • The value change only if the input change
  • A same input produce a same output
  • No have collateral effects

How work a pure function in Reducer

  • Only calculate based on the state and the action
  • Not modify the state directly
  • Not have asynchronous logical

驴Qu茅 es Redux?

  • Naci贸 en 2015.
  • Es un herramienta para mantener y modificar el estado de nuestra aplicaci贸n.
  • El estado es el conjunto de valores almacenados por nuestra app en propiedades o variables en cualquier momento de ejecuci贸n.
  • El estado es usado por la UI para mostrar elementos.
  • El estado puede incluir respuestas del servidor, informaci贸n cacheada, datos generados de forma local, rutas activa, etc.

驴Qu茅 necesitamos?

  • Donde almacenar
    Almacenamiento = store
  • Como acceder
    Acceso a los datos = selectores
  • Como actualizar
    Actualizacion = actions y reducer

Principio de Redux

  1. 脷nica fuente de la verdad (Store)
    • El estado es un objeto, normalmente tiene varias capas de profundidad.
    • Suele ser clave valor (recomendado), aunque tambi茅n puede ser arreglo.
    • El store contiene al estado. Tambi茅n contiene a los selectores, al dispatcher, etc.
  2. El estado es de solo lectura (Actions)
    • La 煤nica manera de modificar el estado es a trav茅s de actions.
    • Los actions son los responsables del paso de un estado a otro.
    • Son objetos que describen que fue lo que paso, el cambio.
  3. Los cambios se realizan con funciones puras (Reducers)
    • Los reducers son funciones puras que toman el estado anterior y una acci贸n, y devuelven un nuevo estado

Una Funci贸n Pura, debe cumplir 3 caracter铆sticas:

  • Valor retornado cambia si la entrada cambia.
  • Misma entrada, misma salida ( el resultado depende de los par谩metros).
  • Sin efectos colaterales ( no tendr谩 en cuenta variables globales).

Reducers:

  • Calcular el nuevo estado basado solo en los par谩metros ( state, action).
  • No modificar el estado directamente.
  • No tener l贸gica as铆ncrona.

Elementos claves de Redux:

  • Store: Donde el estado global es almacenado.
  • M茅todos de acceso: M茅todos para consumir el estado (Selectors)
  • M茅todos de actualizaci贸n: M茅todos para actualizar el estado global (Reducers)

Me encanta la buena explicaci贸n de Mariang茅lica Useche 鉂わ笍!!!

veo que redux se parece a useContext, me queda la duda saber de cuando usar redux o useContext, la respuesta comun es depende de la complejidad, pero no se si se pueda ser mas especifico en cuanto a performance, implementacion ,etc,etc.

Yo tengo un problema al intentar implementar firebase con redux. Basicamente porque se guarda de manera asincrona el objeto. No sabia que era incompatible. Si lo lograba guardar, pero habia que controlar tanta asincronia, que el codigo era inmantenible.

Patr贸n Flujo de Datos Unidireccional

Redux implementa el patr贸n de dise帽o de software llamado 鈥淔lujo de Datos Unidireccional鈥 (Unidirectional Data Flow), el cual consiste en que los datos fluyen en una sola direcci贸n a trav茅s de la aplicaci贸n, lo que facilita su manejo y depuraci贸n. En Redux, los datos fluyen desde el Store a los componentes de la aplicaci贸n, y las acciones enviadas desde los componentes al Store disparan cambios en los datos. Esto proporciona una estructura clara y predecible para la gesti贸n del estado de la aplicaci贸n.

Almac茅n: Almac茅n de estado centralizado que mantiene el estado de toda la aplicaci贸n.

Acciones: Una acci贸n es un objeto simple que describe el cambio que se debe realizar en el estado.

Reductores: Una funci贸n pura que toma el estado actual y una acci贸n como argumentos y devuelve el siguiente estado.

Despachar: Despachar una acci贸n es la forma de iniciar un cambio de estado.

Suscribirse: Puede suscribirse al almac茅n para recibir notificaciones de cualquier cambio de estado.

Middleware: Funciones que mejoran el m茅todo de despacho con funcionalidad adicional, como registro, acciones as铆ncronas, etc.

Estado inmutable: El estado debe tratarse como inmutable, lo que significa que no debe modificarse directamente. Para hacer cambios, se debe crear un nuevo estado.

Fuente 煤nica de verdad: El almac茅n es la fuente 煤nica de verdad para el estado de la aplicaci贸n.

Cambios de estado predecibles: Al seguir los principios de acciones, reductores y una fuente 煤nica de verdad, los cambios de estado en Redux son predecibles y f谩ciles de depurar.

Redux es una librer铆a que nos ayuda a manejar el estado de nuestra aplicaci贸n. Su trabajo es asegurar que los datos de nuestra aplicaci贸n est茅n correctamente actualizados.

Qu茅 necesitamos para poder usar Redux?

  • D贸nde almacenar, por ejemplo el store.
  • C贸mo acceder, por ejemplo los selectores.
  • C贸mo actualizarlos, por ejemplo los dispatchers, disparadores o los reducers.

Redux consta de tres principios:

  • Solo puede haber una 煤nica fuente de verdad. Es decir, el estado global debe existir solamente en un lugar, el store.

Pueden existir confusiones sobre el store y el estado. El estado es un objeto, que normalmente es de tipo clave valor o de tipo array. Es una mejor pr谩ctica usar la clave valor como estado.

Ahora, el store contiene al estado, como tambi茅n a los disparadores, los subscribers, etc. Entonces, cabe recalcar que el store solo puede existir en un sitio.

  • El estado es de solo lectura, quiere decir que no podemos debemos/podemos modificarlo directamente. S贸lo puede actualizarse a trav茅s de un action. Un action es un objeto que describe qu茅 fue lo que paso, que ocurri贸 y que cambio hubo. El action debe ser descriptivo para lo que estemos haciendo, el action tiene dos propiedades, el action type y el action payload.

El action type sirve para decirle a redux de qu茅 forma queremos modificar el estado. El action payload nos sirve para decirle a redux con qu茅 datos nuevos queremos actualizar el estado. El payload en algunos action types es opcional ya que algunas veces no necesitaremos de datos nuevos

  • Los cambios deben realizarse a trav茅s de funciones puras, es decir, reducers. Esta funci贸n o tambi茅n reducer, recibe lo que hemos dicho m谩s arriba, el action type y el estado actual de la aplicaci贸n.

Las funciones puras tienen tres caracter铆sticas:
1- El valor cambia solo si la entrada cambia.
2- Para una misma entrada siempre va a haber una misma salida.
3- No tiene efectos colaterales, solo accede a los datos que nosotros le pasemos, no accede a otras cosas como variables globales o variables de entorno.

Ahora bien podemos decir que los reducers poseen estas caracter铆sticas

  • Calcula el nuevo estado basado s贸lo en los par谩metros (state, action).
  • No modifica el estado directamente.
  • No tienen l贸gica as铆ncrona.

2.-Conceptos claves de Redux


Redux es una libreria que nos ayuda a manejar el estado de nuestra aplicaci贸n, es decir, asegura que los datos de nuestra aplicaci贸n esten correctamente actualizados.


Para aprovecharlo necesitamos de:

  • Donde almacenarlo: Store.
  • Un m茅todo que nos ayude a acceder a el. Por ejemplo: los selectores.
  • Una manera de actualizarlo como los triggers, actions o reducers.


Redux est谩 basado en tres principios:

  • Debe haber una 煤niva fuente de verdad (store). El estado global de nuestra aplicaci贸n debe estar en un solo lugar, el store. El estado es un objeto que normalmente es de tipo clave-valor y tiene una profundidad considerable dependiendo del tama帽o de nuestra aplicaci贸n. Tambi茅n puede habe arreglos. El store contiene al estado pero tambi茅n otras propiedades como los triggers, suscribers, etc. Solo debe haber un solo store.
  • El estado es de solo lectura (actions). No debemos modificarlo directamente, solo se puede actualizar a trav茅s de un action (un objeto que describe que cambio hubo). Asi se puede volver atr谩s en el tiempo.
  • Los cambios deben realizarse a trav茅s de funciones puras (reducers). Esta funci贸n pura recibe el estado actual de la app y el action que describe los cambios.


Funciones puras

  • El valor de retorno cambia si la entrada cambia.
  • Misma entrada, misma salida.
  • Sin efectos colaterales. No depende de variables globales o de entorno.


Reducers

  • Solo se debe calcular el nuevo estado basado solo en los par谩metros (state, action).
  • No se debe modificar el estado directamente. Usar inmutabilidad.
  • No debe tener l贸gica as铆ncrona (tener valores aleatorios o consultar variables externas que puedan causar efectos colaterales).

驴Que es Redux?
Redux es un patr贸n y una biblioteca para administrar y actualizar el estado de la aplicaci贸n, utilizando eventos llamados 鈥渁cciones鈥. Sirve como un almac茅n centralizado para el estado que debe usarse en toda su aplicaci贸n, con reglas que garantizan que el estado solo se puede actualizar de manera predecible.

驴Por que deber铆a usar Redux?
Redux lo gu铆a hacia la escritura de c贸digo que sea predecible y comprobable, lo que lo ayuda a confiar en que su aplicaci贸n funcionar谩 como se espera.

驴Qu茅 necesitamos?

  • Donde almacenar
  • Como acceder
  • Como actualizar

Tres principios

  • 脷nica fuente de verdad (store)
  • El estado es de solo lectura (actions)
  • Los cambios deben realizarse a trav茅s de funciones puras (reducers)

Funciones puras

  • Valor retornado cambia si la entrada cambia
  • Misma entrada, misma salida
  • Sin efectos colaterales

Reducers

  • Calcular el nuevo estado basado solo en los par谩metros (state,action)
  • No modificar el estado directamente
  • No tener l贸gica as铆ncrona