フィルターが反応するとすべての店舗を返す方法jsとredux

Question

私のアプリで「タイプヘッド」機能を作成しようとすると、onChangeを聞く「入力」があり、そのonChangeがRedux私の検索を削除すると、私のホールストアは私のフィルタリングされた結果と等しくなり、私はそれが私の検索時に欲しいですそれは空ですそれは私の店の穴を返します。あなたの減速の内側（GIFおよびコード）

case 'SEARCH_BY_TAG': 
      let tag = action.tag 
      let filtered = state.slice(0) 
      if(tag != ""){ 

       const copied = state.filter(item => { 
         return item.tags.find(obj => { 
          if(obj.name.indexOf(tag) > -1){ 
           return true 
          } 
         }) 
       }) 

       return filtered = copied.filter(Boolean) 

      }else{ 
       return filtered 
      } 

break; 

Answer 1

は、私はあなたがこのことから、それを変更するには、あなたの状態をリファクタリングすべきだと思う

{ 
    query: '', 
    options: [ item1, item2, item3, ... ] 
} 

@Raspoは彼の答えに言ったあなたが行うことができますこの方法 - フィルタリングを行いますあなたのレンダー機能のオプションの

検索フィールドにテキストを変更した場合、現在、あなたはこのアクションをディスパッチされています

{ タイプ：「SEARCH_BY_TAG」、 タグ：「新しいクエリ」 }

私はあなたがすべきだと思います以上のように見えるように、アクション名、および減速のコードを変更：

// note this is almost exactly the same as the old action 
{ 
    type: 'CHANGE_AUTOCOMPLETE_QUERY', 
    query: 'new query' 
} 

と減速は、これに変更することができます：

case CHANGE_AUTOCOMPLETE_QUERY: 
    return Object.assign({}, state, { 
    query: action.query 
    }) 

私が書いた減速器のケースでは、状態の一部のoptionsはまったく変更されていないことに注意してください。それは一定のままです。

今度は、あなたの現在のレンダリング機能は次のようになりますと仮定してみましょう：

const options = reduxState // not sure exactly how you get the state but whatever 
return (
    <div> 
    {options.map(option => { 
     <Option option={option} /> 
    })} 
    </div> 
) 

このコードは、配列として状態を得ることに依存しています。これを行うには、新しい設定で変更することができます：

const query = reduxState.query 
const options = reduxState.options.filter(item => { 
    return item.tags.find(obj => { 
    if(obj.name.indexOf(query) > -1){ 
     return true 
    } 
    }) 
}) 
return (
    <div> 
    {options.map(option => { 
     <Option option={option} /> 
    })} 
    </div> 
) 

Answer 2

代わりのフィルタリング物事うち、render()に直接それを行う、それとは何の問題もありません。

アクションを使用して、検索キーワードを追跡し、リストをレンダリングするときにフィルタを適用することができます。これに

[ item1, item2, item3, ... ] 

：