Mehrere Rendervarianten mit React?

Question

Ich habe eine Webanwendung mit React gebaut, die läuft und gut funktioniert. Ich sollte es wahrscheinlich einfach in Ruhe lassen, aber es gibt einen Bereich, der mich beunruhigt, wo ich denke, dass ich ein bisschen Refactoring machen muss, weil das, was ich tue, nicht mit dem Fluss von React zu tun hat. Ich würde mich für die Ansichten anderer interessieren.

Ich habe eine React-Klasse, Product, die ich verwende, um Produkte auf der Seite zu verfolgen. Die einzige Eigenschaft, die im Zustand gespeichert wird, ist "Quantity", aber ich habe verschiedene Funktionen, die Dinge wie das Aktualisieren eines Korbs mittels Pub/Sub erledigen. Je nachdem, wie und wo diese Produktklasse verwendet wird (ob in einer Tabelle oder für eine Detailansicht, ob auf dem Mobilgerät oder auf dem Desktop), ist die erforderliche Anzeige sehr unterschiedlich. Also rufe ich in meiner Renderfunktion verschiedentlich "renderForDetailOnMobile", "renderForTableOnMobile", "renderForDetailOnDesktop" und "renderForTableOnDesktop" auf.

Wie gesagt, das fühlt sich für mich nicht sehr React-y an, als ob ich das ganze auf den Kopf gestellt hätte (obwohl der Rest der App ist, würde ich viel idiomatischer sagen). Wie sollte man das durchdenken, um es in einzelne kleinere Klassen zu zerlegen, was ich mir vorstelle? Entschuldigung, aus Datenschutzgründen ist es nicht möglich, tatsächlichen Code zu erstellen, daher hoffe ich, dass diese Beschreibung die Situation deutlich genug macht.

Answer 1

Sie sollten Reduzierstücke oder Speicher verwenden, je nachdem, ob Sie eine Flussmittel- oder Reduktoranwendung haben. Dies würde Ihnen helfen, Ihren Zustand und seine Veränderung zu verstehen.

Ich sehe, Sie verwenden Zustand in Ihrem Product, während Sie Geschäfte wie oben erwähnt verwenden sollten.

Also, ich sehe das Problem ist, dass Sie Datenquelle haben und Sie müssen es basierend auf den Geräteanforderungen transformieren.

In diesem Fall würde ich einen Container machen, der andere Komponenten laden würde, um Daten für verschiedene Geräte zu transformieren und darzustellen. Der Container sollte relativ einfach sein und nur die korrekte Komponente basierend auf der erfüllten Bedingung zurückgeben.