Sollen die Reduzierungen verschachtelt werden?

Question

Ich habe eine app, die Instagram sehr ähnlich ist, aber anstatt einen Hauptfeed zu haben, kann der Benutzer mehrere Feeds basierend auf den Ereignissen haben, die er/sie besucht. Ich verwende redux für den Staat Management und zur Zeit habe ich diese Reduzierungen:

• Feed
• Menschen
• Zeitplan
• Benutzer
• Navigation

Mein Feed Reduzierer sieht wie aus:

{ 
    allEvents: [], 
    event: { 
    id: 123, 
    name: 'Foo' 
    }, 
    items: [ 
    { 
     id: 23, 
     imageUrl: 'http://img.com/foo', 
     likes: [{ id: 1, user: {...} }, { id: 2, user: {...} }], 
     comments: [{ id: 1, text: '...', user: {...} }, { id: 2, text: '...', user: {...} }] 
    } 
    ] 
} 

So mein derzeitiger Zustand Struktur wie folgt aussieht:

{ 
    feed, 
    people, 
    schedule, 
    user, 
    navigation 
} 

Aber im Moment der Benutzer jedes Mal aktuelle Ereignis der gesamten Vorschub Zustand ändert durch einen neuen Zustand für das jeweilige Ereignis ersetzt wird, so dass, wenn die Benutzer kommt zurück zum vorherigen Ereignis der gesamte Feed benötigt wieder abgerufen werden, ist das gleiche mit Menschen Reducer und Zeitplan, der von dem Ereignis abhängt. Der Benutzer hat auch einen eigenen Profil-Feed, der die Feed-Elemente des Benutzers anzeigt. Und um dieses Futter zu haben, würde ich verdoppeln müssen, was ich im aktuellen Futterreduzierer habe, also dachte ich, es wäre besser, mehrere Futtermittel zu haben, innerhalb des Ereignisreduzierers.

Ich frage mich, ob der Staat Struktur wie diese nicht besser wäre:

{ 
    events: { 
    items: [ 
     feed, 
     people, 
     schedule 
    ] 
    } 
    user, 
    navigation 
} 

Dann las ich redux#815 oder redux#994, dass es zu nisten Reduzierungen nicht der beste Weg ist. Sollte es mehr oder weniger wie folgt aussehen:

{ 
    feed: { 
    feedIds: [23, 24, 25], 
    byId: { 
     23: { 
     items: [123, 124, 125] 
     } 
    } 
    }, 
    items: { 
    itemsIds: [123, 124, 125, 126, 127], 
    byId: { 
     124: { 
     id: 124, 
     image: 'http://img.com ', 
     likes: [1, 2, 3] 
     } 
    } 
    }, 
    likes: { 
    likesIds: [] 
    }, 
    events: { 
    eventIds: [1, 2, 3], 
    byId: { 
     1: { 
     id: 1, 
     name: 'TYW Croatia w34' 
     feedId: 23, 
     peopleId: 12, 
     scheduleId: 1 
     } 
    } 
    }, 
    people: {...} 
} 

Was in diesem Fall die beste Praxis ist und welche Art und Weise die meisten performant ist?

Answer 1

Eine normalisierte Struktur, wie Ihr letztes Beispiel, ist definitiv sowohl eine Best Practice als auch leistungsfähiger. Der Status ist flacher, so dass Updates zielgerichteter sind und weniger zusammenhängende Objekte betreffen; Gegenstände können nach Bedarf nachgeschlagen werden; und die Aktualisierungslogik wird im Allgemeinen einfacher sein. Darüber hinaus können Sie Element-IDs an verbundene untergeordnete Komponenten übergeben, die dann ihre eigenen Daten basierend auf dieser ID nachschlagen, und sie müssen nur dann neu gerendert werden, wenn sich ihre eigenen Daten ändern. Schließlich funktioniert es gut zum Zwischenspeichern von Daten.

Sie möchten vielleicht einige dieser Artikel auf Redux performance für weitere Informationen lesen, insbesondere High Performance Redux. Vielleicht möchten Sie auch einen Teil der Diskussion unter https://github.com/reactjs/redux/issues/1824#issuecomment-228585904 lesen.

edit:

Als Follow-up, habe ich vor kurzem einen neuen Abschnitt zu dem Redux docs, zum Thema "Structuring Reducers". Dieser Abschnitt enthält insbesondere die Kapitel "Normalizing State Shape" und "Updating Normalized Data".