Gute Strategie für Reducer in react + redux?

Question

Ich verwende React + Redux, um eine Webapp zu erstellen, die mit einer API kommuniziert, ähnlich wie in https://github.com/reactjs/redux/tree/master/examples/real-world gezeigt.

Meine API gibt Künstler-, Album- und Titel-Listen zurück und ermöglicht es, eine Liste von ihnen oder einem einzelnen Interpreten, Album oder Titel abzufragen. (Betrachten Sie es als/Alben,/Künstler und/Tracks, mit zusätzlichen/Album /: ID,/Künstler /: ID und/Tracks /: ID).

Ich implementierte eine API-Middleware und verwendete einen paginate Reducer wie im obigen Beispiel, um einen Speicher mit paginierten Tasten für das Abrufen von Alben, Künstlern und Songs zu erhalten.

Jetzt möchte ich die singulären Aufrufe implementieren, um ein einzelnes Objekt zu erhalten und es anzuzeigen. Aber ich bin mir nicht sicher über den richtigen Umgang mit meinen Reduzierstücken. Sollte ich nur combineReducers mit zusätzlichen Reduzierungen artist, album und track verwalten und speichern diese Elemente?

Eine andere Frage, die ich mit Reducer-Management in Verbindung gebracht habe, ist, dass ich bei meinem jetzigen Setup 3 paginate Reducer mit jeweils 30 Artikeln verbinde. Das ist, ich habe fast 100 Artikel in meinem Laden, während höchstens 30 von ihnen zur gleichen Zeit angezeigt werden, was nicht sehr effizient zu sein scheint. Mache ich das richtig?

sah ich für reale Welt Open-Source-Beispiele mit einer recht großen API zurück, aber kommen konnte nicht ein bisschen mehr ausgearbeitet als die reale Welt Beispiel oben über Beispiele:/

Dank!

Answer 1

Anscheinend gibt es keine Regel passt alle in React.

Aber was ich in den meisten Boilerplates und reagieren Web-Anwendungen auf GitHub festgestellt habe, ist, dass ein Reducer im Allgemeinen für jeden Container erstellt wird.

Also wäre es eine gute Übung, Reduzierungen für deine Künstler, Alben und Tracks zu erstellen, dann kannst du sie mit routereducer zu einem rootReducer kombinieren; Hier ist ein Beispiel.

import { combineReducers } from 'redux'; 
import artists from './artistsReducer'; 
import albums from './albumsReducer'; 
import tracks from './tracksReducer'; 

const rootReducer = combineReducers({ 
    artists, 
    albums, 
    tracks 
}); 

export default rootReducer; 

Auch diese Information ist von Selbsterfahrung und beobachten repos reagieren mit - redux, bitte mich nicht korrigieren, wenn ich falsch bin.

Mit besten Grüßen,

Answer 2

Ich habe angefangen, den Zustand zu halten ganz segmentiert durch Domain Objekttyp - so Künstler Alben und Tracks (sowie einige Benutzeroberfläche Zustand wie „Overlay“, „Fehlermeldungen“ und solche Sachen Das). Dann habe ich einige Klassen neu auswählen, die den aktuellen Zustand nehmen und ihn in etwas Brauchbares für meine React-Komponenten verarbeiten.

Das gibt mir einen einfachen Datenspeicher (der mit Ihrem bevorzugten Unit Testing Framework testbar ist) getrennt von Datentransformation (die unabhängig testbar ist).

Die gute Sache bei der Neuauswahl ist, dass es eine schöne Datentransformationspipeline bietet und die Ergebnisse zwischenspeichert - so dass Sie die Datenumwandlung nicht immer neu berechnen müssen. Das bedeutet, dass Ihre React-Komponenten besser sein können, wenn sie nicht erneut gerendert werden müssen.

Oh, und auf der Effizienzseite der Dinge mit dem Speichern vieler zwischengespeicherter Daten vom Server. Meine Strategie besteht darin, aggressiv zu cachen - also säubere ich keine Inhalte aus dem Cache.Ich habe jedoch ein separates Objekt namens "Controller", das das Redux-Modell überwacht und Ereignisse basierend auf Statusänderungen auslöst (wie das Vorladen von Daten). Hier würde ich Cache-Ungültigkeitscode eingeben, wenn es jemals ein Leistungsproblem wurde. Oder Sie könnten den Reduzierer dazu bringen, die Cache-Invalidierung durchzuführen.