javascript - dev - Redux y RxJS, ¿alguna similitud?

rxjs firebaseapp

Question

Sé que Redux es una mejor "implementación" de Flux, o mejor dicho, es un rediseño para simplificar las cosas (administración del estado de la aplicación).

He escuchado mucho sobre programación reactiva (RxJS), pero aún no me he zambullido para aprenderlo.

Entonces mi pregunta es: ¿hay alguna intersección (algo en común) entre estas dos tecnologías o son complementarias? ... o totalmente diferente?

Answer 1

En resumen, son bibliotecas muy diferentes para propósitos muy diferentes, pero sí, hay algunas similitudes vagas.

Redux es una herramienta para administrar el estado en toda la aplicación. Por lo general, se usa como una arquitectura para las IU. Piense en ello como una alternativa a (la mitad de) Angular.

RxJS es una biblioteca de programación reactiva. Suele utilizarse como herramienta para realizar tareas asincrónicas en JavaScript. Piense en ello como una alternativa a las promesas.

La programación reactiva es un paradigma (forma de trabajar y pensar) donde los cambios de datos se observan desde la distancia . Los datos no se modifican a distancia .

Aquí hay un ejemplo de cambio a distancia :

// In the controller.js file
model.set(''name'', ''George'');

El modelo se cambia desde el controlador.

Aquí hay un ejemplo de observado desde la distancia :

// logger.js
store.subscribe(function (data) {
    console.log(data);
});

En el Logger, observamos los cambios de datos que ocurren en la Tienda (desde la distancia) y escribimos en la consola.

Redux utiliza el paradigma reactivo solo un poco: la tienda es reactiva. No establece su contenido desde la distancia. Es por eso que no hay store.set() en Redux. La tienda observa acciones desde la distancia y se modifica a sí misma. Y la Tienda permite que otros observen sus datos desde la distancia.

RxJS también utiliza el paradigma Reactivo, pero en lugar de ser una arquitectura, le ofrece bloques de construcción básicos, Observables , para lograr este patrón de "observación desde la distancia".

Para concluir, cosas muy diferentes para diferentes propósitos, pero compartir algunas ideas.

Answer 2

Para resumirlo:

Redux: Biblioteca inspirada en Flux utilizada para la gestión del estado .

RxJS: es otra biblioteca de Javascript basada en la filosofía de programación reactiva, utilizada para tratar "Streams" (Observables, etc.) [Lea sobre Programación reactiva para comprender los conceptos de Stream].

Answer 3

Solo quería agregar algunas diferencias pragmáticas de cuando hice el código RxJS inspirado en Redux.

Mapeé cada tipo de acción a una instancia de Asunto. Cada componente con estado tendrá un Asunto que luego se asigna a una función reductora. Todos los flujos reductores se combinan con la merge y luego el scan genera el estado. El valor predeterminado se establece con startWith justo antes del scan . Utilicé publishReplay(1) para los estados, pero podría eliminarlo más adelante.

La función de procesamiento puro de reacción será solo el lugar donde produce datos de eventos enviando a todos los productores / Sujetos.

Si tiene componentes secundarios, debe describir cómo se combinan esos estados con los suyos. combineLatest podría ser un buen punto de partida para eso.

Diferencias notables en la implementación:

• Sin middleware, solo operadores rxjs. Creo que este es el mayor poder y debilidad. Todavía puede tomar prestados conceptos, pero me resulta difícil obtener ayuda de comunidades hermanas como redux y cycle.js ya que es otra solución personalizada. Es por eso que necesito escribir "yo" en lugar de "nosotros" en este texto.

• Sin conmutador / caso o cadenas para los tipos de acción. Tienes una forma más dinámica de separar las acciones.

• rxjs se puede usar como herramienta en cualquier otro lugar y no está contenido en la administración de estado.

• Menos número de productores que tipos de acción (?). No estoy seguro de esto, pero puede tener muchas reacciones en los componentes principales que escuchan componentes secundarios. Eso significa menos código imperativo y menos complejidad.

• Eres dueño de la solución. No se necesita marco. Bueno y malo. Terminarás escribiendo tu propio marco de todos modos.

• Es mucho más fractal, y puede suscribirse fácilmente a los cambios desde un subárbol o varias partes del árbol de estado de la aplicación.

  • Adivina lo fácil que es hacer epopeyas como lo hace redux-obseravble? Realmente fácil.

También estoy trabajando en beneficios mucho mayores donde los componentes secundarios se describen como flujos. Esto significa que no tenemos que completar el estado primario y secundario en los reductores, ya que podemos simplemente ("solo") combinar recursivamente los estados basados ​​en la estructura del componente.

También pienso en omitir reaccionar e ir con snabbdom o algo más hasta que React maneje mejor los estados reactivos. ¿Por qué deberíamos construir nuestro estado hacia arriba solo para descomponerlo a través de accesorios nuevamente? Así que intentaré hacer una versión 2 de este patrón con Snabbdom.

Aquí hay un fragmento más avanzado pero pequeño donde el archivo state.ts construye la secuencia de estado. Este es el estado del componente ajax-form que obtiene un objeto de campos (entradas) con reglas de validación y estilos CSS. En este archivo solo usamos los nombres de campo (claves de objeto) para combinar todos los estados de los niños en el estado del formulario.

export default function create({
  Observable,
  ajaxInputs
}) {
  const fieldStreams = Object.keys(ajaxInputs)
  .map(function onMap(fieldName) {
    return ajaxInputs[fieldName].state.stream
    .map(function onMap(stateData) {
      return {stateData, fieldName}
    })
  })

  const stateStream = Observable.combineLatest(...fieldStreams)
  .map(function onMap(fieldStreamDataArray) {
    return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
    acc[fieldStreamData.fieldName] = fieldStreamData.stateData
    return acc
  }, {})
  })

  return {
    stream: stateStream
  }
}

Si bien es posible que el código no diga mucho de forma aislada, muestra cómo puede construir el estado hacia arriba y cómo puede producir eventos dinámicos con facilidad. El precio a pagar es que necesita comprender un estilo diferente de código. Y me encanta pagar ese precio.

Answer 4

Son cosas muy diferentes.

RxJS se puede utilizar para hacer programación reactiva y es una biblioteca muy completa con más de 250 operadores.

Y Redux es como se describe en el repositorio de github "Redux es un contenedor de estado predecible para aplicaciones JavaScript".

Redux es solo una herramienta para manejar el estado en las aplicaciones. Pero en comparación, podría crear una aplicación completa en solo RxJS.

Espero que esto ayude :)

Answer 5

Puede "implementar" Redux en una línea de RxJS . Si está pensando en Rx por otras razones (para cumplir promesas, usarlo en el servidor y el cliente), omita Redux y vaya a Rx.

Answer 6

Redux es una biblioteca de administración de estado que viene con estándares bien definidos para las operaciones de actualización. En la medida en que cumpla con los estándares, puede mantener su flujo de datos sano y fácil de razonar. También brinda la capacidad de mejorar el flujo de datos con middlewares y mejoradores de tienda.

RxJS es un juego de herramientas para la programación reactiva. En realidad, puedes pensar en todo lo que sucede en tu aplicación como una transmisión. RxJS ofrece un conjunto de herramientas muy rico para administrar esas transmisiones.

¿Dónde interceptan RxJS y Redux? En redux, actualiza su estado con acciones y, obviamente, estas acciones pueden tratarse como flujos. Usando un middleware como redux-observable (no es necesario) puede implementar su llamada "lógica de negocios" de manera reactiva. Otra cosa es que puede crear un observable desde su tienda redux que a veces puede ser más fácil que usar un potenciador.