フラックス・ストア内でフィルタリングする必要がありますか？

Question

これは基本的に、ストア/ビューでの同期操作と非同期操作のベストプラクティスの問題です。

アイテムのリストのリアルタイム検索フィールドを作成しようとしています。

現在の実装では、私のサーバーからすべてのアイテムを要求し、ストアに保存します。ユーザーが検索フィールドに文字を入力すると、ビューは.filter（）ネイティブ関数を使用して項目をフィルタリングします。残念ながら、これは、次のレンダリング（検索フィールドに表示されたキー入力文字を含む）の前に、（項目の数とフィルタの複雑さに起因して）いくらかの遅延を引き起こします。

私の質問です：代わりに、ストア内のアイテムのフィルタリングを初期化するアクションを呼び出し、ストアが完了するたびに更新する必要がありますか？その間に、フィルタリングされた結果が入力される前に、キー入力された文字をレンダリングすることができます。

直前の不完全な要求をフィルタリングするのを防ぐ直感的な方法はありますか？

編集：

コンポーネント/ビュー

_onChange() { 
    this.setState({ 
     items: ItemStore.getFilteredItems() 
    }) 
}, 
handleSearchChange(event) { 
    this.setState({ 
     searchText: event.target.value, 
    }) 

    ItemActions.filterItems(event.target.value) 
}, 
render() {...} 

アクション

filterItems(searchTerm) { 
    dispatcher.dispatch({ 
     type: FILTER_ITEMS, 
     searchTerm: searchTerm, 
    }); 
} 

店

var _store = { 
    items: [], 
    filteredItems: [] 
} 
var filter = function (searchTerm) {...} 
... 

Dispatcher.register(function (action) { 
    switch (action.type) { 
     case FILTER_ITEMS: 
      filter(action.searchTerm) 
      ItemStore.emit(CHANGE_EVENT) 
      break 
    } 
}) 

012：

ここで新しい実装です

編集2：

アクション内でディスパッチして非同期にすると、setTimeoutが追加されてしまいました。また、項目のリストと検索を2つの異なるコンポーネントに分割して、リストの再レンダリングに必要な時間が検索フィールドコンポーネントに影響を与えたりブロックしたりしないようにしました。

Answer 1

フィルタリングは、検索フィールドのキー入力文字をブロックしてはいけません。基本的には、フィルタリングは重い操作なので、あたかも非同期のHTTPイベントであるかのように扱います。ここで

あなたはフラックスの世界でやるべき方法は次のとおりです。

• は、サーバからすべての項目を取得し、店舗
• に検索フィールドに入力するたびにそれらを保存、の状態を設定します入力フィールドとコンポーネントはすぐに再レンダリングする必要があります（https://facebook.github.io/react/docs/forms.html#controlled-components）
• テキストの状態を設定すると同時に、結果をフィルタリングするアクションもディスパッチします。フィルター処理された結果は、別のエンティティーとしてストアに入れられ、このアクションの結果として更新されます。店はフィルタリングされた結果を更新すると
• することは、あなたのコンポーネントがpropと、自動的に再描画（キー押下イベントの独立した）