einen großen dynamischen Speicher in Redux

Question

Laden sieht aus wie etwas, Mein redux Filter:

threads: [ {id: 1, board: 1}, ...], posts: [ {id: 1, thread: 1}, ...]

ein Brett Anzeigen von 20 Fäden zum Speicher hinzufügen. Und jede Seite eines Threads fügt dem Shop 20 Beiträge hinzu.

Darüber hinaus kommen automatisch jede Sekunde neue Posts und Threads hinzu.

Der Code, der ein Brett macht tut so etwas wie:

threads.filter(thread => thread.boardId == props.params.boardId)

Also jedes Mal, wenn Sie ein Brett besuchen wird es Filterung Hunderte von Fäden werden. Und jeder Thread wird durch Tausende von Posts für jede Seite gefiltert.

Wie schnell wird das Leistungsprobleme leiden und wie kann ich sie am besten vermeiden?

Ich schaute auf reselect, aber das scheint wie müsste es auf jeder Ansicht neu berechnen, wie der Filter ändert sich sowieso.

Answer 1

Nehmen wir einmal an, dass Sie reselect weglassen, bis Sie es brauchen. Es ist ein praktisches Werkzeug, wenn Sie skalieren, aber es kann später bei Bedarf ohne viel Aufwand ausgerollt werden.

Eine ziemlich nützliche Methode (die in eine ebenso nützliche Bibliothek namens normalizr extrahiert wurde) ist die Normalisierung Ihrer Array-of-Objekt-Sammlungen. In Anbetracht des Zustands, den Sie in Ihren Fragen beschrieben haben, sollten Sie definitiv überprüfen Sie die Logik dahinter. Was dies tut, ist die alternative Struktur für Ihre Geschäftskollektionen, die sich selbst einzelne Elemente auswählt, während die Leistung von Filterung erheblich beeinträchtigt.

Springen direkt in Ihrem Zustand könnte wahrscheinlich wie am Ende aussehen:

boards: { 
    entities: { 
     board0: { id: "board0", threads: [ thread2, thread4, ...], data: ... }, 
     board1: { id: "board1", threads: [ thread0, thread3, ...], data: ... }, 
    }, 
    ids: [ board0, board1, ... ], 
}, 
threads: { 
    entities: { 
     thread0: { id: "thread0", posts: [ post0, post4, ... ], data: ... }, 
     thread1: { id: "thread1", posts: [ post2, post3, ... ], data: ... }, 
    }, 
    ids: [ thread0, thread1, ... ], 
}, 
posts: { 
    entities: { 
     post0: { id: "post0", data: ... }, 
     post1: { id: "post1", data: ... }, 
    }, 
    ids: [ post0, post1, ... ], 
}, 

für eine Reihe von Gründen Dies funktioniert. Zuallererst werden eingehende Posts und Threads dem Status über Aktionen hinzugefügt, was bedeutet, dass Sie sie einfach normalisieren können , wie sie in kommen. Anstatt ein vollständiges Thread-Objekt direkt in das Array threads zu legen, fügen Sie es unter threads.entities.<threadId> hinzu und aktualisieren das Array boards.<currentBoardId>.threads mit seiner ID. Gleiches gilt für eingehende post Objekte. Und genau so ist es normalisiert.

Nun, wenn es darum geht, Komponenten anzuzeigen, hat jeder board eine sehr leichte Liste namens threads. Anstelle eines Filters über ein Array der Länge boards * threads haben Sie eine Karte über ein Array von Thread-IDs, die nur auf dieser Platine sichtbar sind, und eine Wörterbuchsuche, die von Natur aus schnell ist.

Themen für den sichtbaren Board:

const boardThreads = boards.entities[props.params.boardId].threads 
    .map(threadId => threads.entities[threadId] 

Beiträge für das ausgewählte Thema:

const threadPosts = threads.entities[selectedThreadId].posts 
    .map(postId => posts.entities[postId]) 

Das zusätzliche ids Feld für jede Sammlung nicht notwendig ist, aber ich finde es nützlich. Zum Beispiel, in dem alle Bretter:

const allBoards = boards.ids.map(id => boards.entities[id]) 

Dies könnte jedoch nur stattdessen die Object.keys-Funktionalität erfolgen. Bis zum Entwickler.

Es sollte gesagt werden, dass dies als ausführlicher scheint, dass ein einfacher Array-Filter, und wahrscheinlich erfordert, Gedanken über das Hinzufügen neuer Objekte in den Staat. Die drei von mir bereitgestellten Beispiele umfassen jedoch keine Array-Filterung, und alle Arrays, die in dem Speicher verwandt werden, sind nur Arrays von IDs (die normalerweise sehr einfache Zeichenfolgen sind). Darüber hinaus stellt dies sicher, dass die Daten mit einer Entität immer nur an einem Ort (collection.entities) gespeichert wird, halten den Zustand mager und konsistent, auch wenn es wächst.