Reduxの多くのテキスト入力の変更を処理する

Question

私はReduxで小さなアプリケーションを構築していますが、すべての状態変更はRedux reducers &中央ストアに伝播する必要があります。

たとえば、1つのテキスト入力が自分のコンポーネント内で独自の状態を管理する方が良いでしょうか（setState）？または、これらの入力のすべての単一のキーダウンイベントに応答してアクションを実行する必要があります。もしそうなら、私はパフォーマンスの問題があるかもしれないと思っています。

全体的に、Reduxのキー入力イベントなどのマイナーなUIアップデートを処理するためのベストプラクティスは何ですか？

Answer 1

Reduxは、状態を予測可能に管理するためのものです。状態はデータを意味し、APIまたはクライアントUIからのデータに等しく適用されます。

小規模なアプリケーションでは、パフォーマンスの問題に実際に遭遇するまで、のすべての状態還元型のビジョンから始めます。これには、ビジュアルステート、メニュー、ユーザー入力が含まれます。

redux状態ツリーは、レデューサーを介して多くの入力と更新を処理するために高度に最適化できます。主に、参照によって渡される不変オブジェクトを扱っているためです。

私は、100msごとに大規模なアップデートを処理し、ビジュアルな日付コンポーネントのような複雑なメニューアクションを持つ、Reduxで状態を管理するプロダクションアプリを作成しました。

信頼性を高めるために、ここにはtweet from Dan Abramovがあります。

ps。最悪の場合、入力に関するパフォーマンスの問題が見え始めると、入力フィールドをデバウンスできます。

Answer 2

これらの入力値を入力コンポーネントの外に必要としない場合は、redux状態を使用する代わりに、それらをローカル状態で格納することができます。

多くの場合、グローバル還元状態には多くのコンポーネントで使用されるデータが含まれている必要があります。

Answer 3

アプリでテキスト入力値がグローバルに必要な場合は、それをreduxストアに格納する方がよいでしょう。それ以外の場合は、あなたの地元の州の中にそれを格納することができます、あなたのアプリが反作用のアプリの場合は、rectコンポーネントの状態。

各キーストロークでアクションをディスパッチするかどうかは、使用例に応じて異なります。説明欄に何かを書いているとしましょう。説明が長引くことがあり、不必要なサービス呼び出しが多く発生するため、各キーストロークでサービスコールのアクションをディスパッチする必要はありません。 この問題を解決する1つの方法は、ユーザーがキーストロークの間に一時停止したときにのみアクションをディスパッチすることです。 Debounceは、このようなシナリオをカバーするために使用できるjavascriptプラグインです。 debounceを使用すると、ディスパッチアクションの遅延を設定できます。ここでdebounceプラグインをチェックアウトすることができます：https://github.com/component/debounce。