Je travaille sur une application React and Redux qui utilise ImmutableJS pour stocker tout son état. L'application reçoit des données d'un capteur à environ 100 Hz. J'ai besoin de dessiner un graphique qui se met à jour en temps réel et affiche ces données. J'ai utilisé React-Vis pour le graphique, le problème est qu'il prend un tableau d'objets et non une structure de données ImmutableJS.Visualisation des données ImmutableJS à partir du magasin Redux dans un graphique
J'ai résolu ce problème en convertissant la structure de données ImmutableJS à un tableau comme celui-ci:
const data = this.props.HEGPercentage.toIndexedSeq().toArray()
Cela fonctionne, mais le problème que je rencontrais est retard énorme si je lance ce avec des données réelles, je pense parce qu'il doit créer un nouveau tableau tout le temps.
Comment puis-je créer une solution haute performance pour cela et toujours utiliser ImmutableJS?
Il semble que vous répartissez 100 actions de changement d'état par seconde. Je pense que cela pourrait ralentir les choses de façon significative par lui-même, même sans l'énorme surcharge supplémentaire d'essayer de rendre un graphique avec ces données à 100 images par seconde. Je ne sais pas si l'utilisation de 'toIndexedSeq(). ToArray()' est le problème. Si vous sautez le graphe et que vous faites simplement quelque chose comme 'console.log (this.props.HEGPercentage)'. Est-ce que cela rend le décalage de la page (rendant difficile le défilement ou la saisie dans les champs de saisie, ou similaire)? Essayez simplement d'établir si cela vaut la peine d'essayer d'optimiser 'toIndexedSeq(). ToArray()'. – jonahe
J'ai un code pour simuler l'entrée des données du capteur et le régler à un débit qui devrait être similaire et sans décalage. Maintenant, j'ai également refacturé le réducteur pour utiliser des objets JS réguliers au lieu de Immuable et il semble avoir beaucoup amélioré les performances. Je voudrais toujours utiliser Immutable si possible pour la cohérence avec le reste de l'application ... –
Ok. Les données du capteur sont-elles si précises (ou les fluctuations si importantes) que les valeurs ne réapparaissent presque jamais? Sinon, peut-être qu'il serait possible d'optimiser grâce à une sorte de mise en cache. Si les valeurs sont inutilement précises (peut-être que la résolution de l'écran ne peut pas représenter la différence entre 0.00001 et 0.00002), les données d'entrée peuvent être arrondies pour que les valeurs ne changent pas aussi souvent (moins de restitutions) et répètent plus souvent (mieux pour la mise en cache). Peut-être regarder https://github.com/reactjs/reselect. – jonahe