Redux & RxJS, ¿alguna similitud?

Son cosas muy diferentes.

RxJS se puede usar 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 construir una aplicación completa en solo RxJS.

Espero que esto ayude :)

Para resumirlo:

Redux: Biblioteca inspirada en Flux usada para Administración de Estado.

RxJS: Es otra librería Javascript basada en la filosofía de programación reactiva, utilizada para tratar con "Streams" (Observables, etc.) [Lea acerca de la programación reactiva para entender los conceptos de flujo].

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

Asigné cada tipo de acción a una instancia de Sujeto. Cada componente con estado tendrá un Sujeto que luego se asigna a una función reductora. Todas las corrientes reductoras se combinan con merge y luego scan genera el estado. El valor predeterminado se establece con startWith justo antes de scan. Usé publishReplay(1) para los estados, pero podría eliminarlo más adelante.

La función react pure render solo será lugar donde se producen los datos del evento enviando a todos los productores / Sujetos.

Si tiene componentes secundarios, debe describir cómo se combinan esos estados en el suyo. 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 puedes tomar conceptos prestados, 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.

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

• Rxjs se puede utilizar como una herramienta en otro lugar, y no está contenida en la administración estatal.

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

• La solución es tuya. No se necesita marco. Bueno y malo. Terminarás escribiendo tu propio framework de todos modos.

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

  • Adivina lo fácil que es hacer épicas como lo hacen redux-obseravble? Muy fácil.

También estoy trabajando en mucho más grande beneficios donde los componentes secundarios se describen como flujos. Esto significa que no tenemos que completar los estados padre e hijo en los reductores, ya que podemos combinar recursivamente los estados basados en la estructura de componentes.

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

Aquí hay un fragmento más avanzado pero pequeño donde el estado.el archivo ts construye el flujo 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 hijos 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 el código puede no decir mucho de forma aislada, muestra cómo se puede construir el estado hacia arriba y cómo se pueden producir eventos dinámicos con facilidad. El precio a pagar es que necesitas entender un estilo de código diferente. Y me encanta pagar ese precio.

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