複数のレンダリングバリアントとReact？

Question

Reactを使ってWebアプリケーションを構築しました。これは稼動していて、うまく動作しています。私はおそらくただそれを残しておくべきでしょうが、私に悩まされている領域が1つあります。私がやっていることがReactの流れに邪魔されているとは思わないので、少しリファクタリングをする必要があると思います。私は他人の意見に興味を持っています。

私はReactクラスProductを持っています。これは、ページ上の製品を追跡するために使用します。状態に格納されている唯一のプロパティは 'quantity'ですが、私はpub/subを使ってバスケットを更新するなどのさまざまな機能を持っています。このProductクラスがどのようにどこで使用されているか（テーブルにあるか詳細ビューであるかにかかわらず、モバイルかデスクトップかにかかわらず）、必要な表示は全く異なります。だから私のレンダリング関数では、私はさまざまな 'renderForDetailOnMobile'、 'renderForTableOnMobile'、 'renderForDetailOnDesktop'と 'renderForTableOnDesktop'を呼び出します。

私が言っているように、これは私にはまったくリアクションyを感じさせません。私はすべてのことを逆さまにしているかのように感じます（アプリケーションの残りはもっと慣用的です）。それで、別の小さなクラスに分割するには、どのようにこれを考えなければなりませんか。申し訳ありませんが、プライバシー上の理由から、実際のコードを暴くことはできないため、この説明が状況を十分に明確にすることを願っています。

Answer 1

fluxまたはreduxアプリケーションを使用しているかどうかによって、レデューサーまたはストアを使用する必要があります。これはあなたの状態とその変化の仕方を理解するのに役立ちます。

Productには州が使用されていますが、上記のように店舗を利用する必要があります。

この問題は、データソースがあり、デバイス要件に基づいてデータソースを変換する必要があることを示しています。

このような場合、異なるデバイスのデータを変換して表示するために、他のコンポーネントを読み込むコンテナを作成します。 コンテナは、条件を満たすことに基づいて正しいコンポーネントを返すだけで、単純なものでなければなりません。