A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Casos de Uso del patr贸n Observer: Redux

36/42
Recursos

Aportes 46

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渕odelo鈥 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:

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