Sollte ich den Redux-Store nach der Domain oder nach den App-Views strukturieren?

Question

Ich versuche, meinen Kopf um Redux zu wickeln und wie man es in einer React Native App implementiert.

Ich bekomme die allgemeine Idee und ich mag es. Aber ich bin mir nicht ganz sicher, wie ich meinen Laden strukturieren soll. Ich werde versuchen, ein Beispiel mit zwei Szenen aus der App zu geben.

ProjectListScreen: Eine Liste von Projekten, die mit einer ListView-Komponente erstellt wurden. Jede Zeile legt ungefähr 5 Felder von jedem Projektobjekt offen.

ProjectScreen: Eine ScrollView zeigt alle Felder für ein bestimmtes Projekt an. Das Projektobjekt kann ziemlich groß und nicht ganz flach sein. Zum Beispiel enthält es ein Array von UUIDs, die auf Bilder zeigen.

Also, sollte ich einen einzigen Reduzierer haben, um die kompletten "Projekte" zu behandeln, oder sollte ich einen Reduzierer für ProjectList und einen für Projekte haben? I.e. sollte ich in Bezug auf die reale Domain oder in Bezug auf Ansichten/Bildschirme in der App denken?

Ich vermute, dass die Antwort wird die Domäne nachzuahmen sein. Aber was, wenn es 1000 Projekte in der Liste gibt? Ich muss 1000 Projekte in den Laden laden, einschließlich aller Felder für jedes Projekt. Aber ich brauche nur fünf dieser Felder, um die ListView zu rendern. Nur ein paar Projekte werden wahrscheinlich vollständig geladen, da der Benutzer nicht alle 1000 Projekte in einem ProjectScreen öffnet. Eine Änderung in einem Projekt wird eine Kopie des while-Arrays erzwingen, um unveränderlich zu bleiben.

Ich möchte nicht in vorzeitige Optimierung stecken, aber ich möchte die Struktur des Ladens von Anfang an etwas bekommen. Ich weiß, dass ich Immutable.js verwenden könnte, um die Aktualisierung von Elementen in der Liste zu optimieren, aber dies würde mir nicht mit JS-Objekten arbeiten lassen, was sich mühsam anfühlt.

Ich würde lieber Seamless-unveränderlich verwenden, aber ich glaube nicht, dass diese Art der teilweisen Aktualisierung einer großen Liste mit SI schneller ist als das Kopieren der Liste.

Ich würde gerne hören, dass Leistung im Vergleich mit dem UI-Rendering und anderen Aufgaben kein Problem ist. Dies würde es zu einem Kinderspiel machen, mit einer Domänenstruktur zu gehen.

Answer 1

Domain, absolut. Ihre Geschäftsstruktur sollte die tatsächlichen Daten, mit denen Sie arbeiten, vollständig widerspiegeln. Ihr UI-Layer sollte dann alle erforderlichen Transformationen für jede Komponente ausführen, hauptsächlich in Ihren mapStateToProps-Funktionen. Konzentrieren Sie sich auf die Aktionen und das Verhalten, die Ihre Anwendung im Kern ausmachen. (Dies sollte auch zu einem besseren Test-Setup führen.)

Die beste Methode zum Organisieren von Daten, die verschachtelt oder relational sind, besteht darin, sie zu normalisieren, ähnlich wie Tabellen in einer Datenbank. Ich habe einige vorherige Antworten geschrieben, die dieses Konzept in gewissem Maße beschreiben und auf einige weitere Artikel und Diskussionen verweisen ([0], [1], [2]).

Ich rate generell davon ab, Immutable.js zu verwenden, zumindest um damit zu beginnen. Es hat seine Verwendungen und kann bieten einige Leistungsverbesserungen, wenn Ihre App richtig konfiguriert ist, aber auch eine Reihe von potenziellen Performance-Fallstricke sowie ([3]). Ich würde vorschlagen, mit einfachen JS-Objekten zu bleiben. Es gibt eine Vielzahl von Möglichkeiten, diese auf unveränderliche Weise zu verwenden. Ich habe eine Liste von Artikeln, die diese Ansätze beschreiben ([4]), sowie eine Liste von Bibliotheken, die einfache JS-Objekte unveränderbar machen können ([5]).

Schließlich fange ich eigentlich gerade an, an einer neuen Seite für die Redux-Dokumente zu arbeiten, die Best Practices für die Strukturierung von Reduzierern beschreibt.Es wird einige Zeit brauchen, um es geschrieben und poliert zu bekommen, aber Sie sollten es im Auge behalten. Das Problem ist bei [6], und das hat eine Verbindung zu meinem aktuellen WIP Artikel Zweig.

[0] https://stackoverflow.com/a/38105182/62937
[1] https://stackoverflow.com/a/38017227/62937
[2] https://stackoverflow.com/a/37997192/62937
[3] https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#immutable-data
[4] https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md
[5] https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md
[6] https://github.com/reactjs/redux/issues/1784

edit:

Als Follow-up, die Redux docs Jetzt gehören ein , die eine Vielzahl von Informationen zu diesem Thema hat.