Redux: 質問：ReduxのストアとReactの状態のどちらを選択するのですか？

アプリにグローバルに関係なく、複雑な方法で変化しない一時的な状態にはReactを使用します。 たとえば、一部のUI要素の切り替え、フォーム入力状態。 グローバルに重要な状態、または複雑な方法で変更された状態にはReduxを使用します。 たとえば、キャッシュされたユーザーや投稿の下書きなどです。

Redux状態からReact状態（Reduxに何かを保存するのが面倒になる場合）またはその逆（以前はローカルであった状態にアクセスする必要があるコンポーネントが増える場合）に移行したい場合があります。

経験則は次のとおりです。厄介でないことは何でもします。

ネットワークリクエストを介してフェッチされたデータの場合、サーバー側のレンダリングをサポートするために常にストアを使用します（それが最終的な目標であると思われる場合）。そうしないと、水分補給ができなくなります。

それらの状態が2つ以上のコンテナによってリッスンされるためには、それは店舗にもあるべきですか？

一時的なものと永続的なものの区別について、 @ gaeronに同意します。 しかし、私は実際にこれを3つのカテゴリーで考えていUIの状態であり、私も一時的なものだと思います。 もう一つは、実際にアプリケーションの永続的な中核であるアプリケーションの状態です。 しかし、その中間にある3番目は、ルーティング状態です。 「ルーティング」という用語は人に馴染みがあるので使用しますが、デスクトップ、Web、モバイルにまたがる方がよいと思うので、これを「ビュー選択」状態に抽象化します。

これは、ユーザーに表示される内容を決定するため（たとえば、タブの状態と同様）、UIの状態であると主張できます。 しかし、2つの違いがあります。 1つ目は、状態がシリアル化され（つまり、URLとして）他の人に送信されることです。 したがって、特定のUI状態に直接「ディープリンク」できるようにする場合は、ルート状態にする必要があります。 2つ目は、多くの場合、初期ルート状態またはルートの変更がアプリケーション状態の変更をトリガーすることです（つまり、表示するデータをロードします）。 もちろん、UIのアクションも同じことをします。 しかし、私が区別するのは、ルート状態の変化に関する「アプリケーションロジック」をテストするために、ビューやレンダリングなしでルート状態を正確に持つことができる（そしてすべきである）ということです。 また、ビューとレンダリングを関与させる必要がないため、部分的にアプリケーションの状態になります、IMHO。

これは、状態管理のためのReduxとReactの問題とどのように関連していますか？ アプリケーションの状態はReduxのドメインであり、UIの状態はReactのドメインです。 しかし、ルーティング状態は（私の意見では）UI状態と見なすことができますが、Reduxによって管理される必要があります（私がそう思う理由の詳細については、埋め込みリンクを参照してください）。

明確にするために、動き回ることについての

アプリケーションの状態はReduxのドメインであり、UIの状態はReactのドメインです。

私はこれを主張しないことに注意してください。 Reactでアプリの状態を維持することとReduxでUIの状態を維持することの両方で問題ないと思います。 ドメインで区切るべきではないと思います。

私の考えでは、Reduxでアプリを作成する場合は、単一の状態ツリーを採用します。 UIの状態もそこに置きます。 ただし、面倒でイライラする場合は、コンポーネントに状態を設定することを恐れないでください。 私のポイントは、厄介でない限り単一の状態ツリーを使用し、それが物事を複雑にするのではなく単純化する場合にのみこれを行うということです。 それが唯一のガイドラインです。

まず、 @ gaearonの口に言葉を入れる

第二に、私は@gaearonに完全に同意します。 私はまた、単一の状態ツリーアプローチを固く信じています。 UIの状態について話したとき、アプリケーションの状態とはあまり関係がないかもしれない（現在選択されているタブが何であるかなど）非常に小さなことを頭に入れていました（ @gaearonについて正確に説明しています）。

それで、私の立場を明確にしましょう。 ルート状態を含め、ほとんどすべてがReduxにあるReduxとTypeScriptを使用したTodoMVC実装で行ったように。ルート状態について具体的に言及し、私が思うので区別しました（そしてそのTodoMVCで見ることができます）実装）それは間違いなくReduxに属し（そしてレンダリングにまったく接続されるべきではありません）、そして最も確実に「UI状態」ではないこと。

Reactコンポーネントの場合、状態を使用することはめったにありません。 私は、レンダリングするものに関する情報を取得するためと、コンポーネントの外部で変更をトリガーするために呼び出すことができるクロージャーを取得するために、小道具を使用することを好みます。 生活を楽にするためだけにコンポーネントに状態を導入することはめったにありませんが、それは避けようとしています。 それが物事を明らかにすることを願っています。

この質問は本当に主観的で複雑だと思うので、今日はチームと難しい決断をしました。気にしないでください。

• Reduxに接続している再利用不可能なコンテナの場合は、すべてをReduxストアに配置するだけです。モーダルが開いている場合のような小さなUI状態であっても、 this.setStateは使用しないでください。
• Reduxとは関係のない再利用可能なコンポーネントの場合は、React状態を使用します。

そして今、私たちはいくつかのヘルパーを実装して、小さなUI状態を管理するのが面倒にならないようにしています。

@gaearon @ lionng429 @xogenyこのアプローチについて考えられる欠点はありますか？

@inetfuture TypeScriptを使用していて、アプリケーションの状態の型をずっと下まで定義しているので、アプリケーション（redux）の状態について少し悲惨な傾向があります。 そうは言っても、すべての状態操作をレンダリングから分離するコンポーネントライブラリを開発するときに、私は偶然に遭遇しました（詳細については、前のコメントのリンクを参照してください）。 これは、些細なことではない一般的なコンポーネントであっても、状態を完全に外部化することを意味します。 私は通常、すべてを小道具（状態と状態を操作するためのクロージャーの両方）を介して渡します。 そうすれば、アプリケーションの状態に簡単にフックできます。 これの一部は間違いなくTypeScriptを使用することのアーティファクトであり、 combineReducersとconnectを使用して物事をフックする（そして少なくとも型の制約を保持する）ことができないことです。 したがって、これはおそらく代表的な視点ではありません。 しかし、なぜ「すべてをReduxストアに入れるだけ」と言うのか、私はあなたが状態の台所の流しになってしまうのではないかと心配します。 TypeScriptを使用するということは、アプリケーションの状態を拡張するのにある程度の努力が必要であることを意味するという事実は、「本当にこれが必要なのか」と判断せざるを得ないため、必ずしも悪いことではないと思います。 物を積み上げる代わりに。

別の考えとして、ローカルコンポーネントの状態は、高速な更新時間を必要とする制御された入力に役立つだけでなく、トリガーされる実際のアクションの数を減らすことができます。 現在のプロトタイプでは、編集中の現在のアイテムを小道具として受け取るフォーム編集HOCをまとめました。 また、変更されたフィールドをその状態で保存し、ローカルWIPの変更を組み合わせて、デバウンスされた「EDIT_ITEM_ATTRIBUTE」アクションクリエーターを呼び出すことにより、フォーム入力変更イベントを処理します。 その結果、フォーム自体のみが再レンダリングされ、トリガーされるアクションがはるかに少なくなるため、フォームフィールドはすぐに更新されます（たとえば、「A」を数秒間押し続けると、「AAAAAAAAAAAA」値のみが更新されます。 'A'、 'AA'などではなくアクションとして送信されます）。

誰かが気にかけているなら、私はhttps://gist.github.com/markerikson/554cab15d83fd994dfabで要点としてHOCを取り上げました。

とにかく、重要なのは、そのコンポーネントの状態とストアの状態の両方に用途があるということです。実際のユースケースを検討する必要があります。

再利用可能なコンポーネントに関しては、それらが十分に大きくて複雑である場合、主にトレーサビリティとテストのための再生のために、Reduxでそれらの状態を保持することは非常に将来性があります。 しかし、このコードの再利用をどのように正確に設計する必要があるかについては、まだ疑問があります（コンポーネントとアクションとレデューサー）。

私たちのアプリケーションでは、この問題を接続のようなスタイルで解決しました。 https://github.com/Babo-Ltd/redux-state

Reduxに州を保存するのが面倒だとはめったに感じませんでした。 私はそれが提供するパワーが好きです。将来的には、必要に応じて他のコンポーネントと相互作用させることができます。

厄介なことに頭に浮かぶのは、フォーム要素の状態を処理することだけです。フォーム要素は非常に多く存在する可能性があるためです。 その場合、私はredux-formのようなライブラリを使用します。

私のポイントは、厄介でない限り単一の状態ツリーを使用し、それが物事を複雑にするのではなく単純化する場合にのみこれを行うということです。 それが唯一のガイドラインです

@gaearonは、いつ、どのように_ぎこちない_と見なされるかを決定する方法についての経験を共有したいと思いますか？ たとえば、アプリケーション状態のアトムに配置すると、十分に厄介だと思う典型的なシナリオ/例をいくつか挙げていただけますか？ 前もって感謝します！

@idavollen私はカップルを与えることができます：

• ドロップダウンのオープン/クローズ状態。それ以外の場合は、ストア内のすべてのドロップダウンコンポーネントを追跡する必要があります。
• <input>変更をデバウンスする場合、状態を使用して値を即座に更新し（他のコンポーネントが不必要に再レンダリングするリスクを冒さずに）、デバウンスされた方法でストアを更新できます。

基本的に、他のコンポーネントに影響を与えない状態に使用する必要があります。

考慮すべき3番目の状況があります。たとえば、チェックボックスが前に付いた多くの行と送信ボタンで構成されるフォーム（renderメソッドで計算にコストがかかるreactコンテナーコンポーネント）があります。 送信ボタンがクリックされると、フォームはチェックボックスがオンになっている行を送信する必要があります。つまり、ユーザーが切り替えたときにフォームを送信する前の個々のチェックボックスの一時的な状態は重要ではなく、コンポーネントの状態として扱われるべきではなく、チェックボックスの切り替えによって発生することはありません。呼び出されるrender（）。

とりあえず、チェックボックスの状態をアプリケーション状態アトムにもローカルコンポーネント状態にも入れませんでした。つまり、チェックボックスを切り替えているときにrender（）を不必要に呼び出さないようにするために、フォームはコンポーネントを反応させます。チェックされたチェックボックスを保持するにはインスタンス変数が優先されますが、react-patternには反します。

この場合、チェックボックスのこれらの状態を管理するための最良のアプローチは何でしょうか？

@idavollenこれらのチェックボックスは制御されていませんか？ そうでない場合は、とにかくそれらを再レンダリングしているので、コンポーネントの状態で選択されているものを追跡し、それを使用してデータのどの部分を送信するかを選択できます。

コンポーネントの状態と比較して、Reduxはどのくらいの速さですか？ 実際のイベントとレンダリングプロセスの間のタイミングに関して本当に賢明なUI小道具をReduxに頼るべきですか？ コンポーネントの状態を使用するには、それほど単純ではない多くの通信が必要になるという複雑な状況があります。 この件での助けをいただければ幸いです。

@tiberiumaxim私の経験では（私はスマートTVのような低電力デバイスで実行されるreactとreduxでアプリを開発しています）。 ほとんどの場合、コンポーネントの状態の更新はパフォーマンスが向上します。これは、発生する必要のある差分がより小さなデータセットであり、ディスパッチを発生させる必要がないためです。 コンポーネントまたは子のみがその状態にアクセスする必要がある場合、ローカルコンポーネントの状態に固執する方が良いでしょう。これは、UI関連の状態の場合によくありますが、ある時点でそのデータをreduxストアに保持する必要がある場合は-ローカル（コンポーネント）状態とグローバル（redux）状態の組み合わせを使用し、そのデータを正しい時間（つまり、ユーザーがページから移動したとき）またはその効果のためにreduxストアに保持する必要がある場合があります。 たぶん、あなたがあなたの特定のケースにもう少し光を当てることができれば-私はあなたにもっと詳細な情報を与えることができます

Reduxでどの状態になるか、そして何がコンポーネントに対してローカルのままであるかを決めるのはあなた次第です。 http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-stateおよびhttp://redux.js.org/docs/faq/Performanceを読むことをお勧めします

@deowkパフォーマンスの問題についての知識を共有してくれてありがとう、私は同じだと思いましたが、確認が必要でした。
また、 @ markeriksonはリンクに感謝します、私はそれらをもう一度見ていきます。

誰かがそれを明示的に言及したかどうかはわかりませんが、ローカルコンポーネントの状態はReduxでも管理できます。 コンポーネントコンストラクターで直接ストアを作成できます。 このローカルストアには、このコンポーネントの状態が含まれ、このコンポーネントに関連するアクション（および、このストアのdispatch関数、またはそのdispatch関数を呼び出すコールバックのいずれかを渡すことによってその子）を処理します。 。

このアーキテクチャは手動で実装することも、redux-fractal、redux-uiなどのライブラリを使用することもできます。

または、Danが指摘しているように、コンポーネントの状態を更新するためのレデューサースタイルのアプローチを実装することもできます。 https://twitter.com/dan_abramov/status/736310245945933824を参照して

アクティビティインジケーターやモーダルオープンまたはクローズなどのUI状態をどこに保存するか知りたいです。 setStateを使用すると、reactコンポーネントのユニットテストで問題が発生しますか？

@ akshay2604 ：繰り返しますが、それはあなた次第です。 このスレッドの以前のコメントに投稿したリンクを参照してください。 コンポーネントのテスト中、特にEnzymeライブラリを使用してコンポーネントをテストしている場合は、間違いなくsetStateを使用できます。

私の考えを共有させてください。

アプリケーションの入出力との関係に応じて、状態を3つの大きなカテゴリに分類します。

• 「キャッシュ」：永続データのミラーである状態。 例：

{ "todos": [{ id: 1, title: "title" }, { id: 2, title: "title" }] }

• 「変更」：永続データへの保留中の変更を説明する状態。 例：

{ "changeTodo": { title: "title", action: "add", done: false },
{ id: 1, title: "changed title", action: "modify", done: true }, { id: 2, action: "delete" } }

• 「ビュー」：現在のフィルタリング、並べ替えなどのビューオプションを伝達する状態。例：

{ "displayOptions": { searchTerm: "title", sort: ["title", "desc"], filter: "done=false" } }

cacheとchanges混ぜたり、 cacheとview混ぜたり、 viewと混ぜたりしないchanges 。

もちろん、これらを何らかの方法でマージして、単一のReactコンポーネントに表示する必要があります。 そのため、「マージされた」オブジェクトは次のようになります。

{ "todos": [{id: undefined, title: "title", done: false }, { id: 1, title: "changed title" }] }

しかし、それは状態ではなく、アプリケーションロジックの結果です。 したがって、どこにも保管しないでください。
このマージされた状態をセレクターにキャッシュしたり、ストアにキャッシュしたり、コンポーネントにキャッシュしたりできますが、これは「状態」ではなく、重要ではありません。アプリケーションロジック関数を3つの状態部分すべてに簡単に再適用できます。再びマージされた状態を取得します。 それが機能的アプローチのすべてです。

Reduxのメンテナは、「アプリケーションロジックを複数のレデューサーと複数のイベントとして実装する必要があります。これにより、「マージされた」オブジェクトのさまざまな部分が構築されます」と言われます。
それは間違ったアプローチだと思います。 それはあなたがreduxから逃れることができないことを意味します。 状態を管理するためのツールとして意図されていたものは、本質的にアプリケーションロジックの実装になります。

こんにちは、私は数日間React / Reduxを掘り下げ、一部の情報をコンポーネントのローカル状態に保存するか保持するかを選択するために行われた決定を理解しています。

しかし、1つのアクションで両方を同時に必要とする場合はどうなりますか？ 非常に一般的なユースケースは次のとおりです。

1. [コンテキスト] Reduxストアはシングルリーフ{ modelItems: myModelItems }です。 サーバーモデル（の一部/予測）をキャッシュします
2. [コンテキスト]ビューは、保存/キャッシュされたアイテムのUIリストを表示する単一のスマートコンポーネントMyItemsViewで構成されています。 マウントされると、コンポーネントはモデルアイテムのフェッチをトリガーします。 コンポーネント入力： myModelItems 。 コンポーネント出力： fetchModelItemsアクショントリガー。 コンポーネントの内部： state.busyおよびstate.errorId
3. [計画] MyItemsViewがfetchModelItems MyItemsViewトリガーすると、モデルをフェッチしてストアにキャッシュするためにHTTPリクエストがサーバーに送信されます。 この非同期アクションには4つのフェーズがあり、フックの数は次のとおりです。 onStarted （HTTPリクエストが開始され、スピナーの読み込みがコンポーネントで開始されます）、 onEnded （HTTP応答が到着し、スピナーの読み込みがコンポーネントで停止します） 、まだ応答ステータスを確認していません）、 onFailed （エラー通知はコンポーネントに表示されます）およびonSucceed （Reduxストアが更新され、保持されているモデルキャッシュが転送されます）レンダリング用のコンポーネント）

したがって、 fetchModelItemsアクショントリガーを次のように分割する方法：

• onStarted 、 onEnded 、 onFailedはReduxストアにヒットしませんか？ これは、 onStartedとonEndedが一時的なUI状態であり、モデルキャッシュとの相互作用があってはならないためです。 同じことがonFailedも当てはまります（モデルキャッシュは変更されず、UIはエラー通知をレンダリングします）。 MyItemsViewは、キャッシュされたモデルではなく、ここでUI状態をレンダリングします
• onSucceedがReduxストアにヒットしましたか？ これは、モデルキャッシュの宝くじに当選し、信頼できる情報源へのアクセスが許可され、シャワーを浴びて水分を補給し、 MyItemsView新鮮なmyModelItemsをレンダリングするためです。

私の現在の試みでの実装については、ReduxThunkがfetchModelItemsアクショントリガーを処理します。 そこでReduxパスを選択したような気がしますが、「非同期の成功をReduxストアに渡すだけで、他のものはすべてReactコンポーネントの状態に保つ」と言うことはもう考えられません。

これに戸惑いながら、接続されたコンポーネント（つまりReduxコンテナ）に転送する成功をフェッチして保存します。 しかし、スピナーの読み込みはなく、コンソールに記録された悲惨なエラーメッセージATMはありません。 store.ui.myItemsView.busyもstore.ui.myItemsView.errorIdも定義したくありませんが、コンポーネントの状態でそれらの情報を取得するだけです。

@pascalav ：
これはバグトラッカーであり、サポートシステムではありません。 使用法に関する質問については、Stack OverflowまたはReactifluxを使用してください。多くの人があなたを助けてくれる準備ができています。おそらく、より良い答えがより早く得られるでしょう。 ありがとう！