Casos de Uso del patrón Observer: Redux

No entendi nada, pero Me encanta!!!

Redux es un contenedor predecible del estado de aplicaciones JavaScript.

Te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos ambientes (cliente, servidor y nativo), y son fáciles de probar. Además de eso, provee una gran experiencia de desarrollo, gracias a edición en vivo combinado con un depurador sobre una línea de tiempo.

Puedes usar Redux combinado con React, o cual cualquier otra librería de vistas. Es muy pequeño (2kB) y no tiene dependencias.

Conceptos básicos

Redux de por si es muy simple.

Imagine que el estado de su aplicación se describe como un simble objeto. Por ejemplo, el estado de una aplicación de tareas (TODO List) puede tener el siguiente aspecto:

{
  todos: [{
    text: 'Comer',
    completed: true
  }, {
    text: 'Hacer ejercicio',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Este objeto es como un “modelo” excepto que no hay setters. Esto es así para que diferentes partes del código no puedan cambiar el estado arbitrariamente, causando errores difíciles de reproducir.

Para cambiar algo en el estado, es necesario enviar una acción. Una acción es un simple objeto en JavaScript (observe cómo no introducimos ninguna magia) que describe lo que sucedió. A continuación mostramos algunos ejemplos de acciones:

{ type: 'ADD_TODO', text: 'Ir a nadar a la piscina' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Hacer valer que cada cambio sea descrito como una acción nos permite tener una claro entendimiento de lo que está pasando en la aplicación. Si algo cambió, sabemos por qué cambió. Las acciones son como migas de pan (el rastro) de lo que ha sucedido. Finalmente, para juntar el estado y las acciones entre si, escribimos una función llamada reductor (reducer). Una vez más, nada de magia sobre él asunto, es sólo una función que toma el estado y la acción como argumentos y devuelve el siguiente estado de la aplicación. Sería difícil escribir tal función para una aplicación grande, por lo que escribimos funciones más pequeñas que gestionan partes del estado:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Y escribimos otro reductor que gestiona el estado completo de nuestra aplicación llamando a esos dos reductores por sus respectivas state keys:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

Esto es básicamente toda la idea de Redux. Tenga en cuenta que no hemos utilizado ninguna API de Redux. Ya se incluyen algunas utilidades para facilitar este patrón, pero la idea principal es que usted describe cómo su estado se actualiza con el tiempo en respuesta a los objetos de acción, y el 90% del código que se escribe es simplemente JavaScript, sin uso de Redux en si mismo, sus APIs, o cualquier magia.

Interesante… algún día con mas experiencia lo vamos a aplicar. Gracias!!

Lo que más me gusta de esta clase es ver cómo Node lo tiene en otra sintaxis, y cómo lo están implementando en ECMAScript. De alguna manera me deja ver el concepto mismo del Observer sin complicarte con el ejemplo de la anterior clase…

Sabía! Jajaja, ya decía yo que se me parecía mucho a react y redux

EventEmitter para Node.js

Llevo ya varias clases que duran 5 - 15 minutos que me toman 30 min a 1hr a entender pero vale toda la pena!
No se rindan!

Definitivamente Platzi no sirve para aprender a programar , todo muy por encima, no lo lleva a uno paso a paso habrá que pagar un servicio más personalizado

Una forma de agregar observables a JS es usando la librería de RXJS
https://rxjs.dev/guide/overview
También esta disponible para Java, Ruby, Python y otros lenguajes.

El patrón observers está pensado para situaciones en las que habrán muchos elementos que actualizar o se recomienda usar también aunque haya que actualizar un único elemento?

Si quieren aprender a usar Redux dejó estos dos cursos:

• Curso de React Router y Redux
• Curso de Redux por Bedu

GitHub de Redux:
https://github.com/reduxjs/redux

https://nodejs.org/api/events.html

Excelente

Ya tengo en la mira el curso de React, para entender a fondo Redux 😎

El patrón de diseño por excelencia en react

Al parecer Observer no fue incluida para proximas versiones de ecmaS+
https://blog.logrocket.com/interesting-ecmascript-2017-proposals-163b787cf27c/

Apuntes de la clase

React => Redux
Vue => Vuex

En forma básica es como funciona vuex dentro de vue y sirve para poder comunicar a todos los objetos y no depender únicamente de la relación padre hijo.

Redux

• Una librería de manejo de estado.
• Inicializas un store como un estado y un reducer.
• Despachas acciones que modifican el estado.
• El store notifica que el estado cambió.
• Muy utilizada con React

EventEmitter

Es una librería de Node.js que cumple con el patrón Observer. Cuenta con tres funciones: emitter.on (subscribe), emitter.off (unsubscribe) y emitter.emit (notify).

Aquí un ejemplo de uso

import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

let unsubscribe = store.subscribe(() => {
  console.log(store.getState());
})

store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/incremented' })
unsubscribe();
store.dispatch({ type: 'counter/decremented' })

output:

{value: 1}
{value: 2}

y angular la puedes combinar con redux

¡WoW!

Genial Como Redux lo implementa, es bueno que este patrón sea implementado en el estándar ECMAScript

Muy buena info.

Buena info.

Puedo usar redux con vue.js o solo con código js vanilla?

exceleten clase. Redux es una herramienta muy completa que usa el patron observer.

Wow! muy buena informacion.

El eventEmiter se usa en angular 😄
Sería excelente que ECMA implementara los Observables en JS de manera nativa!

muy buena la información

Redux es algo aparte de React? Y si es asi, React no tiene una implementacion propia para el manejo de dichos estados?

No es algo que se aprenda a la primera toca dedicarle mucho tiempo para entender sobre el tema le dedicare el tiempo que haga falta para entenderlo a la perfeccion

Interesante, ahora pienso que es una forma mas practica por ejemplo para desarrollar una tabla tipo master-details al cambiar el elemento de la tabla master se notifica a la tabla details el cambio y subsecuente presentación de datos.

Para los curiosos les dejo por aqui una aplicacion con react en la cual utilice como base principal redux 😊
https://johan52752.github.io/rewards-store/

Se me ocurrio una cosa bien mágica para implementar observer con asincronismo ajsajs si me sale luego se las comparto 😂

pienso que en esta clase se expone el alcance de la herramienta de la clase anterior aplicada en otras tecnologías. es bueno saber que no es algo de relleno. es importante y por eso nunca hay que dejar de aprender!

Siendo honestos pensé que seguía el flow del curso, pero luego de TypeScript siento como si me hubiese estrellado.

Creo que repetiré el curso…

Creo que es la clase más corta, y en verdad no entendí mucho. Además de que el código no se ve muy bien. Del resto muy buen curso y excelente profesor.

Hasta ahora me parece un curso que se debe tomar más de una vez

Buena!

definitivamente la velocidad del curso y el hilo tematico con respecto a la ruta no colabora en nada

Uhh que genial, of curse no entendí nada porque aún no se de React, pero en cuanto lo aprenda regresaré a esta clase específicamente! xD

El event emitter si que lo he llegado a usar con Vue:D!

Buena expliacion del tema

Gracias!

buena