web-dev-qa-db-fra.com

Alternative Redux

J'ai récemment commencé à apprendre à réagir et j'ai rapidement rencontré le problème d'un composant parent gonflé plein de fonctions et d'état. Au début, j’ai examiné Flux, puis Redux, mais les deux solutions semblaient vraiment envahissantes.

Je me demande pourquoi quelque chose comme ceci n'est pas fait:

//EventPropagator.js
let EventPropagator = {
    registerListener(listenerObject){
        if (this.listeners == null)
            this.listeners = []
        this.listeners.Push(listenerObject)
    },
    fireEvent(eventObject){
        let listenerList = this.listeners.filter(function(listener){
            return listener.eventType === eventObject.eventType
        })
        listenerList.forEach((listener) => {
            listener.callback(eventObject.payload)
        })
    }
}
export default EventPropagator

Pour utiliser: composants simplement registerListener et fireEvent:

//main.js
import EventPropagator from './events/EventPropagator'

EventPropagator.registerListener({
    "eventType": "carry_coconut",
    "callback": (payload) => {
        // actually carry coconut
        this.setState({"swallow_type": payload.swallow})
        console.log(payload)
    }
})
EventPropagator.fireEvent({
    "eventType": "carry_coconut",
    "payload": { "swallow": "african" }
})

Cela permettrait beaucoup de découplage et l'état pourrait facilement être transmis avec ce type d'événement. Quels sont les inconvénients de cette approche?

javascripteventsreactjsredux
13
jcuenod

Vous devriez essayer mobX

mobX est une bibliothèque de gestion d'état qui a profité de décorateurs et qui a réussi à supprimer le code indésirable. Par exemple, il n'y a pas de concept de reducers dans mobx.

J'espère que cela t'aides!

4
Pranesh Ravi

Redux est une continuation du style de programmation déclaratif de React. Un moyen simple de mapper la logique de votre application aux composants consiste à utiliser quelque chose comme Backbone.React.Component mais en utilisant redux, vous permettra d'utiliser tout l'outillage et le middle-ware. Les transitions indéfinies dans vos applications facilitent également le débogage. Maintenant, je conviens que vous avez besoin de beaucoup de câblage et de passe-partout pour obtenir de toute façon.

Si vous voulez utiliser redux, vous pouvez regarder quelque chose comme redux-auto

Redux-auto: Redux simplifié (avec une approche plug and play)

Supprimer le code standard lors de la configuration d'un magasin et des actions. Pourquoi? Cet utilitaire vous permet de vous familiariser avec Rudux en une fraction du temps!

Vous pouvez voir maintenant un redux-auto: projet helloworld

1
codemeasandwich

L'utilisation de votre EventPropagator résout le problème de la communication, mais ne gère pas l'intégrité des données. Par exemple, si plus de 2 composants écoutent le même événement et utilisent la charge utile de cet événement pour mettre à jour leurs propres états. Plus les composants écoutent les mêmes événements, plus il est complexe de s'assurer que tous ces composants ont les mêmes données dans leurs propres états.

Deuxièmement, Flux/Redux fournit un flux de données unidirectionnel. Un exemple simple pourrait être environ 2 composants A & B, consommant les mêmes données X de source externe (API ou stockage). L'utilisateur peut interagir avec l'un ou l'autre pour obtenir les dernières données X. Maintenant, si l'utilisateur demande à B de mettre à jour X, nous avons 2 solutions avec votre EventPropagator:

  1. B mettra à jour X lui-même et déclenchera un événement pour informer A de la mise à jour pour laisser A restitué. Il en va de même pour A si l'utilisateur demande à A de mettre à jour X. Il s'agit d'un flux de données bidirectionnel.
  2. B déclenchera un événement vers A demandant de mettre à jour X et attendra A de réactiver un événement pour le mettre à jour. Si l'utilisateur demande à A de mettre à jour, A le fera lui-même et informera B . C'est un flux de données unidirectionnel.

Une fois que votre nombre de composants augmente et que la communication n'est pas limitée entre A et B, vous devrez peut-être vous en tenir à l'une de ces 2 solutions ci-dessus pour éviter la logique de votre application. Flux/Redux choisit le second et nous en sommes satisfaits.

Si vous pensez vraiment ne pas avoir besoin d'une autre bibliothèque pour le contrôle des données, vous devriez regarder la dernière fonctionnalité de React: Context . Il fournit les fonctionnalités les plus essentielles qu'une bibliothèque de contrôle de données peut avoir, et il ne fait que réagir. Notez que vous devez mettre à jour la version React de votre projet vers 16.3 pour utiliser cette fonctionnalité.

0
blaz

https://github.com/deepakpatil84/pure-data Note: je suis l'auteur de cette

0
Deepak Patil

Si vous souhaitez profiter de tous les avantages de Redux, utilisez Redux.

Si vous souhaitez uniquement conserver une synchronisation variable entre les composants de React, utilisez Duix.

Je suis le créateur de Duix. Je l'utilise depuis un an et, finalement, je l'ai publié il y a quelques heures. Consultez la doc: https://www.npmjs.com/package/duix

0
Broda Noel

Ce qu'il faut, c'est un système piloté par les événements pour qu'un composant enfant puisse parler à son frère, mais cela ne signifie pas que les données doivent être transmises en tant que charge utile des événements. Cela conduirait à un système sans gouvernance et un cauchemar pour un projet où plusieurs développeurs y travaillent.

Tant que vous suivez le modèle d'architecture semblable à un flux (google it), vous pouvez le faire avec succès en utilisant simplement des objets javascript et javascript pour conserver les données avec le système d'événements.

Les données doivent être traitées comme l'un des trois états différents. C'est soit

  1. données d'origine extraites du serveur
  2. données transformées (transformées de l'original)
  3. Stocker des données. Celui qui sert de modèle auquel l’UI est liée

Si vous écrivez une bibliothèque javascript pour gérer le mouvement des données entre les trois états et pour gérer les transformations, vous pouvez utiliser le système d'événements pour déclencher un événement "magasin modifié" que les composants peuvent écouter et afficher automatiquement.

0
PrimeLens