reactjs - helmet - react meta tags

¿Cuál es la diferencia principal de redux y reflujo en el uso de la aplicación basada en reaccionar?

Question

Recientemente, realicé un estudio preliminar sobre el desarrollo de un sitio de comercio electrónico y descubrí que tanto el reflux como el reflux provienen de la arquitectura de flujo en Facebook y que ambos son populares. Estoy confundido acerca de la diferencia entre los dos.

¿Cuándo debo usar redux vs reflux, y cuál es más flexible durante la fase de desarrollo de una aplicación web de comercio electrónico?

Answer 1

Flux, Reflux y Redux (y muchas otras bibliotecas similares) son diferentes formas de manejar la gestión de datos transversales.

Los componentes de Reacción Básica funcionan bien con las relaciones padre-hijo, pero cuando tiene que proporcionar y actualizar datos de diferentes partes de la aplicación que no están directamente conectadas, se puede desordenar rápidamente. Esas bibliotecas proporcionan tiendas y acciones (y otros mecanismos) para mantener y actualizar dichos datos.

Flux es la solución original desarrollada por Facebook (al igual que React), es potente pero probablemente no es la más fácil o legible. El reflujo fue desarrollado en parte para hacerlo más fácil y claro. La principal diferencia es que en Reflux cada dato tiene su propia tienda y acciones, lo que lo hace muy legible y fácil de escribir. Desafortunadamente, Reflux ya no está tan desarrollado activamente, el autor está buscando mantenedores. Pero, en general, diría que Reflux es una alternativa más elegante a Flux.

Redux es otra solución, que se ha convertido en la más popular hasta ahora. Su ventaja es que proporciona a las tiendas anidadas contenido inmutable para que pueda implementar fácilmente la función anterior / siguiente y tenga acciones transversales que tengan impacto en muchas partes de la tienda. Las desventajas de redux son que es bastante detallado y tiene muchos más conceptos que Flux o Reflux. Para las mismas acciones básicas, necesitará mucho más código, y la implementación asíncrona no es la más limpia. Es definitivamente potente y escalable.

Aquí hay un enlace que habla de él más ampliamente: http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/

Answer 2

Quería escribir otra respuesta centrada en la diferencia específica entre Reflux y Redux. @Mijamo entra en el centro de por qué se originaron como cosas diferentes y es un muy buen resumen si tiene contexto, pero llegué a esta pregunta para saber específicamente la diferencia entre los dos desde una perspectiva de desarrollo. Viendo cómo acababa de entrar y leer todas las cosas, quería escribir una respuesta. Voy a actualizar esta respuesta con más ejemplos de código.

Flujo (descripción rápida)

Antes de entrar en esto, creo que una cosa que deberíamos tener en cuenta es seguir pensando en Flux actual y cómo maneja actualmente la escala de una aplicación con muchos componentes o muchos estados de estados diferentes que deben gestionarse. Esta es una buena charla en React NYC: Scaling Flux, que trata el problema y la solución a la que llegan no está muy lejos de lo que Reflux y Redux te permiten hacer, pero en pocas palabras, una gran pregunta es " ¿Qué hacemos? cuando tenemos componentes que tienen algún estado compartido que todos deben tener en cuenta? ¿Cómo manejamos y escalamos eso? "En última instancia, una gran cantidad de estos marcos de referencia es que necesitamos esta idea de un estado global. Inevitablemente, ambos marcos introducen algunos conceptos similares para lograr esto que veremos más adelante.

Debido a que tendré que hacer referencia a una comparación de Flux, solo quiero mostrar una visión general rápida de cómo Flux funciona con la siguiente imagen:

Reflujo

En Reflux, no hay despachador, y los Componentes de la Vista se comunican directamente a través de los componentes a través de acciones.

+---------+       +--------+       +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+       +--------+       +-----------------+
     ^                                      ¦
     +--------------------------------------+

En términos de cómo se diferencia de Flux, no hay demasiado. Aún crea sus propias acciones y crea sus propias tiendas, y aún tiene sus tiendas que escuchan acciones. Creo que la mayor diferencia es que para que los componentes de la Vista envíen acciones directamente a la tienda en lugar de pasar por un distribuidor, los Componentes tienen una propiedad de la tienda que proviene de extenderse desde Reflux.Component lugar de React.Component para que tenga una forma de enganchar directamente en una tienda. es decir, este ejemplo

class MyComponent extends Reflux.Component
{
    constructor(props)
    {
        super(props);
        this.state = {}; // our store will add its own state to the component''s
        this.store = StatusStore; // <- just assign the store class itself
    }

    render()
    {
        var flag = this.state.flag; // <- flag is mixed in from the StatusStore
        return <div>User is {flag}</div>
    }
}

También tiene la capacidad de conectarse a múltiples tiendas (hay una propiedad que creo que se llama stores que toma una matriz y Reflux también se entrega con la capacidad de editar mapStoreToState en caso de que quiera controlar específicamente cómo las tiendas pasan el estado a los componentes.

Naturalmente, debido a que está utilizando un componente con el que se suministra Reflux, probablemente debería leer su documentación sobre el Componente de Reflujo y cómo hacer los componentes correctamente teniendo esto en cuenta

Lo último que mencionaré es que mencioné anteriormente que el gran problema era el estado global y cómo aborda esto. Reflux tiene un Reflux.GlobalState que se puede contribuir siempre que establezca ID en sus Tiendas. El enlace anterior Reflux.GlobalState.[StoreID].[property] muchos más detalles, pero con esto, puede acceder a ellos a través de Reflux.GlobalState.[StoreID].[property] donde StoreID es la identificación que asigna a la tienda y la property es el estado real que desea acceso.

Redux

El redux en sí mismo cambia muchas cosas y también mata la idea de los despachadores. Antes de profundizar en esto, quiero resaltar los tres principios que mencionan en sus documentos.

1. Única fuente de verdad
2. El estado es de solo lectura
3. Los cambios se hacen con funciones puras.

En Redux, realmente solo hay un estado global con el que tienes que lidiar y ese es el estado global para tu aplicación (frente al gran problema). Si bien todavía tiene acciones y almacenes, las tiendas en sí mismas son simplemente responsables de mantener un registro de su propio estado en el árbol de estado global, permitiéndole enviar acciones para realizar cambios en el árbol de estado y permitiéndole acceder al estado. También puede poner oyentes en estas tiendas a través de subscribe .

Una gran motivación de esto entra en los dos primeros principios. En Flux o incluso Reflux, si quisiera asegurarse de que nada estaba mutando el estado cuando no quería (porque técnicamente puede acceder y cambiar el estado en las tiendas cuando lo desee), dependería de cosas como ImmutableJS para Asegúrate de no estar mutando accidentalmente el estado. Redux, por otro lado, lo hace para que solo pueda acceder al estado a través de las tiendas / selectores y realizar cambios solo a través de acciones de despacho (el tercer principio).

Una cosa interesante a tener en cuenta es que mientras Reflux y Flux tenían acciones en las tiendas que escucharía y determinaría qué cambio de estado haría, las tiendas en Redux simplemente envían un mensaje con la carga útil que desea y luego pasan por una declaración de cambio gigante. para determinar lo que debería hacer con el árbol de estados: esto es lo que ellos denominan reductores . Esto no es diferente de cómo Flux se ha reduce en sus Tiendas, pero Redux rompe este concepto como algo propio y su árbol de estado global pasa a través de un rootReducer (Redux se envía con una buena función para que combineReducers y haga un rootReducer ). Una buena manera de pensarlo es mediante el envío de un cambio al árbol de estado gigante y, a continuación, cualquier cambio que desee, se reduce o se condensa al estado final que desea. Esto realmente influye en cómo Redux configura muchas cosas, por lo que le dice a React cómo reenviarse (asumiendo que estás usando Redux con React).

El flujo de datos de Redux se mencionó muy bien en el enlace que mencioné anteriormente, pero también hay una buena infografía que adjunto.

Así que las diferencias fundamentales son realmente

• Redux tiene un enfoque completamente diferente para la administración del estado: abarca la idea de que existe un estado global y que, inevitablemente, si desea hacer cambios, debe suceder allí de una manera muy específica (cómo maneja los componentes a los que tiene acceso). qué estado depende de ti).
• Reflux realmente trata de admitir que los componentes tengan la capacidad de acceder a múltiples tiendas sin tener que cambiar demasiado de lo que originalmente fue Flux (me gustaría pensar que Reflux es lo que Flux debería haber sido).
• Redux realmente cambia la forma en que se gestiona el árbol de estados y le asigna responsabilidades diferentes a las tiendas, y cambia la forma en que la información del estado se asigna a los componentes, mientras que Reflux simplemente elimina al intermediario para que sus componentes puedan acceder a las tiendas que necesiten con más facilidad. .

Esperemos que esto da más información sobre las diferencias fundamentales entre ellos.