Redux/sagas: Ansatz für größere APIs

Question

Ich habe mit Redux/sagas Workflows auf kleinen Projekten basierend auf diesem real-world example gearbeitet, aber die Logik von denen ist bei weitem nicht so komplex. Wie sollte ich Ansatz sein, mit einer umfassenderen API zu arbeiten (d. H. Reddit's API), ohne die Dinge übermäßig ausführlich zu machen?

• Mache ich einen const für jeden Endpunkt? d. h., export const fetchUser = login => callApi(`users/${login}`, userSchema)
• Sollte ich besorgt sein über die Verwaltung der entity cache?
• Gibt es eine Möglichkeit, die Komplexität/den Standardaufbau weiter zu reduzieren (d. H. Weitere Anforderungstypen gruppieren mit get/put/post/delete für denselben Endpunkt)?
• Gibt es Beispiele, die sich mit größeren/komplexeren als die real-world befassen?

Answer 1

Ich denke, die Antwort hängt davon ab, wie flüssig Sie Ihre Komponenten sein sollen.

Ich bin auf einem großen Code-Basis arbeiten Sagas verwenden, werden unsere Seiten in „Typen“ getrennt, beispielsweise eine „Liste“ Typ „Form“ Typ usw.

Wir haben eine Saga verantwortlich für den Inhalt holen , während jede pageComponent beim Rendern für die Bereitstellung der Endpunkte verantwortlich ist.

Dies ermöglicht einen sehr modularen Ansatz, um eine Komponente hinzuzufügen, die Sie benötigen, um mit einem Unterabschnitt Ihres Dateisystems umzugehen.

Unsere Seiten sind meistens eine Konfigurationsdatei, die all diese Informationen enthält, und wir verwenden diese Konfiguration, um eine "generische" Komponente mit den richtigen Daten zu rendern.

Saga Wiederverwertbarkeit

I Sagas als sequentielle Prozesse zu sehen, sie kann für asynchrone Abfragen von Daten sein, aber sie sind auch für etwas nützlich, die mit der Reihe nach behandelt werden muss.
Diese "Flüsse" sind manchmal in einer Codebasis sehr ähnlich, und diese sind diejenigen, die Sie verallgemeinern möchten.
Wie Sie bereits gesagt haben, sind die häufigsten Operationen CRUD für jeden Endpunkt, der einfach zusammen gruppiert werden kann.

Login ist extrem anders als loadUserList und verschiedene Dinge müssen danach passieren, aber loadUserList und loadRepoList extrem ähnlich ist.

Dinge, die Auswirkungen Wiederverwertbarkeit

1. Ihre Fähigkeit, Ihre API zu steuern, wenn Sie die Form der API diktieren können Sie verbrauchen, können Sie mit noch mehr Verallgemeinerungen vor Ende weg.

2. Die Form der Anwendung (Front-weise) - sind Ihre Seiten merkwürdig voneinander abhängig? Zum Beispiel ist es nicht ungewöhnlich, dass Versicherungsprogramme Formulare haben, die miteinander verbunden sind. Sie können die ersten drei Formulare in beliebiger Reihenfolge ausfüllen, aber sobald alle drei fertig sind, wird das vierte freigeschaltet.
   Jede dieser Abhängigkeiten hat normalerweise ihre eigene Saga, die den Fluss Ihrer Nutzungsgeschichte steuert.

3. Muss Ihre Anwendung synchronisiert werden? Sie können ganz einfach Sagen erstellen, die Daten automatisch mit Ihren verschiedenen Endpunkten synchronisieren und Ihren Redux-Status aktualisieren. Es gibt viel zu beachten, auch wenn wir den Benutzer mit neuen Daten unterbrechen wollen (wir möchten ihn vielleicht wissen lassen, dass das Formular bearbeitet wird) out Daten) datiert - Synchronisierungen eine deutliche Saga erfordern, da es in der Regel verschiedene Geschäftsregeln, wenn es zu synchronisieren, welche Daten - wenn die Regeln sehr unterschiedlich sind diese zwingen Sie können mehrere Sagas)

Gemeinsame Sagas zu schaffen, die sein kann vereinheitlicht

1. UserSagas - einloggen, abmelden.
2. FetchData - holt einen einzelnen Datensatz oder eine Sammlung.
3. DeleteData - Löscht einen einzelnen Datensatz oder eine Sammlung von IDs
4. Datensynchronisierung - Aktualisieren Sie regelmäßig Ihre lokalen Daten von einer Remote.

In Bezug auf die Einheit Cache

Entity-Cache ist nur ein Name, den sie gepflückt, aber das geht zurück, um die zuvor genannten Punkte.

Wird Ihre Anwendung mit veralteten Daten ausgeführt, oder holen Sie sie jedes Mal vom Server ab, wenn Ihre Komponente geladen wird?
Wenn die Daten nur einmal abgerufen werden und Sie veraltete Daten anzeigen, speichern Sie sie in einem Cache-Typ (das ist im Grunde der Redux-Speicher).
Wenn Sie veraltete Daten anzeigen, ist dies der richtige Weg.