2016-06-30 16 views
3

こんにちは、私は現在、React + Reduxを学習しています。私は建築的な質問をしています。React + Reduxアーキテクチャのアプローチ

質問を作成してAPIに保存できるインターフェイスがあると仮定します。最初に現在保存されている質問がAPIからロードされ、Reduxストアに保存されます。

答え配列は、このような何かを見ることができる:私のインターフェイスで

var answers = [ 
 
\t { 
 
\t \t id: 1, 
 
\t \t title: 'can crop circles be square?', 
 
\t \t correct: false 
 
\t }, 
 
\t { 
 
\t \t id: 2, 
 
\t \t title: 'can you daydream at night?', 
 
\t \t correct: true 
 
\t } 
 
\t { 
 
\t \t id: 3, 
 
\t \t title: 'do Jewish vampires still avoid crosses?', 
 
\t \t correct: true 
 
\t }, 
 
]

私は編集のためのさまざまなオプションを持っているか、与えられた質問を削除します。したがって、編集中の質問にアクティブ状態を設定したいと考えています。これを行う方法はReduxの状態を変更することで、各質問にはアクティブなプロパティがあります。私は、質問1を編集していた場合、状態は次のようになります。

var answers = [ 
 
\t { 
 
\t \t id: 1, 
 
\t \t title: 'can crop circles be square?', 
 
\t \t correct: false, 
 
\t \t active: true 
 
\t }, 
 
\t { 
 
\t \t id: 2, 
 
\t \t title: 'can you daydream at night?', 
 
\t \t correct: true 
 
\t } 
 
\t { 
 
\t \t id: 3, 
 
\t \t title: 'do Jewish vampires still avoid crosses?', 
 
\t \t correct: true 
 
\t }, 
 
]

私の関心は、私はAPIのデータと一緒に私のアプリ混合状態だということです。これを行う正しい方法ですか、またはAPIデータを状態から分離する良い方法がありますか?

+6

'activeAnswerId'はあなたの状態で' answers'の隣接プロパティーになります –

+0

もちろんです!なぜ私はこのことを考えなかったのですか?)目を開けていただきありがとうございます;) –

+0

アクティブなステータスはUIの変更ですか?そうであれば、それをあなたの状態に含める必要はありません。あなたはそれをあなたの質問コンポーネントに渡し、それに応じて 'className'属性を変更することができます。 –

答えて

1

私は、あなたのアプリケーションの完全な定義であることを念頭に置いて、redux状態ツリーで定義されているように、web-app上のデータスコープの理解を集中する必要があると思います。

このようなことを考えて問題を解決します。今では「APIデータ」というようなことはありません。単にどこかから供給された初期状態だけです。たぶんおそらくマシン境界を越えたAPIからのローカルストレージから、それは状態ツリーの枝を初期化するために使用されたデータなので重要ではありません。そのブランチが初期化され、データが国家の本体に吸収されると、アプリケーションの要求に応じて自由に任意の変更を加えることができます。

これに対して1つの議論しかできません。データを元のソースに戻す必要がある場合はどうなりますか?データがアプリを離れ、APIの場合はマシンの境界を横切るため、正しい形状に再作成する必要があります。ここでは珍しいことは何もありません。これを行う必要があると、不必要に状態ツリーの形を知らせるべきではありません。

要するに、「APIデータと一緒にアプリの状態」について心配する必要はありません。状態ツリーにデータを入力し、アプリが要求するとおりに正確に構造化します。外部要件の要求としてデータを抽出します。