React + Redux - オートコンプリート入力の状態を管理する

Question

私は、キーストロークごとにバックエンドから検索提案を取得するオートコンプリートテキスト入力を備えた大きなアプリを持っています。
ユーザーが文字を削除した場合、同じクエリに対する複数のバックエンド呼び出しを避けるために、最近の検索クエリ結果を保存します。私はまた検索結果を新鮮に保つためにある期間の後にこれらのクエリを期限切れにしたいと思う。
また、バックエンド呼び出しがその正確な値に対してまだ完了していない場合は、現在のテキスト入力のためにloadingインジケータが必要です。

問題は、この状態とこの状態に関連するアクションを管理する場所です（以下、私が必要とする状態状態のサンプルがあります）。

メインのReduxストアでそれを管理することは、一時的な中間状態です（非常に短期間です（クエリはしばらくしてから有効期限が切れます）。同じコンポーネントのインスタンスが多数ある可能性があります異なるインスタンスが異なるバックエンド呼び出しを使用する可能性があります。
ローカルのReact Component stateオブジェクトの最近の検索クエリと検索結果を管理することは素晴らしい解決策です。

しかし、私はコンポーネント内で発射したくないバックエンドコールを持っていますが、適切なアクションとレデューサーでフルフライングFluxプロセスを行い、結果（またはエラー）をストアコネクタ。

結局のところ、ここにあるものはお互いに適切に適合していません - 私はメインのReduxストアで状態を管理したくありませんが、バックエンドコールが必要です状態）を使用して、主要減量者+店舗ライフサイクルを実行します。

堅牢ための任意のアドバイス、メンテナンス性、および簡単にフィギュアアウトせずに、ドキュメントアーキテクチャが認められます。

私は、このコンポーネントのすべてのインスタンスのために必要な状態は次のようになります。

（のは、私がdogで入力し、最後の結果はまだ来ていなかったとしましょう）：で

 
{ 
    currentSearchInput: 'dog', 
    recentQueries: [ 
     { 
     input: 'd', 
     isLoading: false, 
     results: [...] 
     }, 
     { 
     input: 'do', 
     isLoading: false, 
     results: [...] 
     }, 
     { 
     input: 'dog', 
     isLoading: true, 
     results: null 
     }, 
    ] 
} 

Answer 1

を私意見、コンポーネントの内部状態で上記のオブジェクト構造を使用して、ちょうどいいです。 Reduxを介して返されたHTTPリクエストの結果を受け入れ、配列内の適切なオブジェクトのresultsフィールドを更新する関数を記述します。個人的には、私は結果フィールドに約束を保存します。 componentWillReceivePropsが呼び出されるたびに（reduxが新しいredux状態を返すため）、setStateを使用してrecentQueriesを更新します。

また、制限を設定します。 5最近のクエリの最大値など。

Googleでは、GoogleプレースAPIを使用して住所/施設の提案を返信しています。データはそれほど価値がありませんでした。結果のほとんどは10kb未満です。

編集：コメント欄で私たちの議論を踏まえ

、ここで私がやってことをお勧めするものです。

入力のonChangeハンドラにあります。

減速ではAPI呼び出しの結果や検索条件を返す

、アクションの作成者では通常どおり

としてアクションに参照するには

チェックを検索条件を渡します検索呼び出しを保持する配列の長さ（reduxストア値）。 5未満の場合は、現在の値と新しい値を連結して戻します。その値の場合は、配列の0番目の位置を新しいコンテンツで上書きします。例えば

state[0] = action.newApiResult; return state;