Énorme objet dans un magasin Redux

Votre principale préoccupation semble être la performance, même si je suis d'accord avec les suggestions qui ont été mentionnées dans les commentaires, à savoir: utilisez une charge utile plus petite, vous devez rendre beaucoup de données dans un composant de réaction et vous en avez besoin pour être performant, pour y parvenir, vous devez utiliser un composant fenêtré, cela ne rendra que les lignes visibles et rendra tout le reste à la demande, rendant le rendu des ensembles de données vraiment longs vraiment performant, regardez dans https://bvaughn.github.io/react-virtualized/ et transmettez simplement les données au composant

Redux par défaut n'utilise pas de comparaison approfondie. https://redux.js.org/faq/ immutable-data # redux-shallow-checking-requires-immutability

Il y a pas mal d'informations sur cette page, mais un peu distillée - Redux vérifie uniquement si la référence de l'objet est modifiée.

Il est difficile de dire quel est le problème spécifique sans voir de code. Il est possible que vous placiez votre objet trop haut dans l'arbre et que Redux traverse les clés au premier niveau de votre énorme objet. Si tel est le cas, le simple fait d'encapsuler votre objet dans l'état Redux peut aider.

{
   huge: myHugeObject,
}

Mais en réalité, c'est plus un pansement. Si Redux traverse votre objet, vous ne l'utilisez probablement pas tout à fait correctement.

Un exemple de code aiderait vraiment à diagnostiquer le problème.

Ce serait ma suggestion pour une performance ultime. Gardez à l'esprit que je ne l'ai pas testé moi-même, mais si je comprends bien votre problème, je ne vois aucune raison pour laquelle cela ne fonctionnerait pas.

Vous devez stocker 100 000 lignes de données et, idéalement, ces données doivent persister côté client. La meilleure solution ici est d'utiliser IndexedDB car vous pouvez effectuer des lectures et des écritures comme une base de données tout en ayant suffisamment de stockage. Comme le recommande Soleil, je vous suggère d'utiliser dexie pour interagir avec IndexedDB. Vous n'en avez pas besoin, mais vous devriez certainement l'avoir en raison de la flexibilité qu'il vous offrira.

Vous devez également être en mesure de modifier ces changements, et ce ne sera pas facile sans pousser le travail sur un autre fil. Donc, la suggestion est la suivante:

// all in dexie docs
this.props.db.animals.hook('updating', (modifications, key, obj, tran) => {
  if ("species" in modifications) {
    this.props.actions.task(modifications.species, key, obj, tran);
  }
})

Les données sont maintenant dans IndexedDB et vous pouvez l'interroger à tout moment. Vous avez maintenant besoin d'un moyen de pousser les pièces lourdes de performance sur un autre filetage. Heureusement, il y a redux-worker

  ...
  import { applyWorker } from 'redux-worker';
  // you can't have any external dependencies for your worker, so bundle them or find a way to inline them
  const worker = new Worker('./script.js') // alternatively inline an async function it with `greenlet-with-edge`
  const enhancer = compose(applyMiddleware(thunk, logger), applyWorker(worker));
  const store = createStore(rootReducer, {}, enhancer);

Mettez votre worker en vigueur

import reducer from './reducers';
import task from './task';
import { createWorker } from 'redux-worker';

let worker = createWorker();
worker.registerReducer(reducer);
worker.registerTask('DIFF_IT', function (a) {
  // do your diffing and expensive functions
  task(a);
});

Passez votre db dans votre composant et accrochez-vous à la mise à jour. Appliquez votre action

  async function seedData() {
    // serialize your data, hopefully have unqiue id field on each row
    const hundredK = toJSON(await fetch(source));
    // IndexedDB doesn't have tremendous write speed, so it may be better to chunk your rows into
    // 10k intervals for  seem to perform the best but vary based on PC / browser implementation
    const db = new Dexie("myDataSource");
    // set version of Indexed to use (1 is preferred for best compatibility)
    // and set the indexes
    db.version(1).stores({
      animals: 'id,type'
    });
    let mice = [];
    for (let i = 0; i < hundredK.length; i++) {
      mice.push({
        id: i,
        species: hundredK[i].species,
        type: hundredK[i][0].type,
        facts: {
          someText: "this could come from hundredK, but I'll hardcode it",
          someNumber: i
        }
      });
    }
  }