eコマースウェブサイトのような汎用フィルタを設計するには、ReactJを使用していますか？

Question

Gbif Haveのような汎用フィルタを構築する予定です。 私の質問は、この問題に近づく方法です。 私はこのプロジェクトにReactJを使用します。 このようなジェネリックフィルタを設計するために、Reactとreduxと一緒に調べる必要がある他の技術はどれですか。

このフィルタは、Reactとreduxのみを使用して設計しようとしています。

私のアプローチでは、私はサーバーからデータを取得しているget_dataメソッドの状態変数内にクエリパラメータを維持しようとします。誰かが任意のフィルタボタンをクリックすると、そのフィルタコンポーネントのカスタムイベントをクエリパラメータとともに渡し、このイベントをget_dataメソッドで処理します。 get_dataメソッドでは、再びこの値をget_data状態パラメータに保存していて、再び新しいフィルタデータを取得しています。

ここで、上記のアプローチの問題は、パラメータの数が増えるにつれて、維持することが非常に困難になることです。

私のget_dataコンストラクタはこのように見えます。

constructor(props){ 
     super(props); 
     this.state={ 
     params:{ 
      max:10, 
      offset:0, 
      taxon:[], 
      sGroup:[], 
      classification:undefined, 
      userGroupList:[], 
      isFlagged:undefined, 
      speciesName:undefined, 
      isMediaFilter:undefined, 
      sort:"lastRevised", 
      webaddress:"" 

     }, 
     title:[], 
     groupName:[], 
     userGroupName:[], 
     view:1 
     } 


     this.props.fetchObservations(this.state.params) 
     this.loadMore=this.loadMore.bind(this); 
    }; 

フィルタコンポーネントからデータを取得する方法は、このようなものです。

これは、フィルタの1つからonSelectメソッドを呼び出すhandleInputメソッドです。

handleInput(value,groupName){ 
    this.setState({ 
     active:true 
    }) 
    this.props.ClearObservationPage(); 
    var event = new CustomEvent("sGroup-filter",{ "detail":{ 
     sGroup:value, 
     groupName:groupName 
    } 
    }); 
    document.dispatchEvent(event); 
    }; 

私は私のget_dataコンポーネントでこのイベントを処理しています方法は次のようになります。

sGroupFilterEventListner(e){ 
     const params=this.state.params; 
     if(!params.sGroup){ 
      params.sGroup=[]; 
     } 
     console.log("params.sGroup",params.taxon) 
     params.sGroup.push(e.detail.sGroup) 
     params.sGroup=_.uniqBy(params.sGroup) 
     const groupName=this.state.groupName; 
     var titleobject={}; 
     titleobject.sGroup=e.detail.sGroup; 
     titleobject.groupName=e.detail.groupName; 
     groupName.push(titleobject); 
     let newgroupname=_.uniqBy(groupName,"sGroup") 

     params.classification=params.classification; 
     let isFlagged=params.isFlagged; 
     let speciesName=params.speciesName; 
     let MediaFilter=params.isMediaFilter; 

     let taxonparams=params.taxon; 
     taxonparams= taxonparams.join(","); 
     let sGroupParams=params.sGroup; 
      sGroupParams=sGroupParams.join(","); 
     let userGroupParams=params.userGroupList; 
     userGroupParams=userGroupParams.join(","); 

     let newparams={ 
        max:10, 
        sGroup:sGroupParams, 
        classification:params.classification, 
        offset:0, 
        taxon:taxonparams, 
        userGroupList:userGroupParams, 
        isFlagged:isFlagged, 
        speciesName:speciesName, 
        isMediaFilter:MediaFilter, 
        sort:params.sort 

       } 

     this.props.fetchObservations(newparams); 
     this.setState({ 
       params:{ 
        max:10, 
        sGroup:params.sGroup, 
        classification:params.classification, 
        offset:0, 
        taxon:params.taxon, 
        userGroupList:params.userGroupList, 
        isFlagged:isFlagged, 
        speciesName:speciesName, 
        isMediaFilter:MediaFilter, 
        sort:params.sort 

       }, 
       groupName:newgroupname 
     }) 
     } 

私は私のcomponentDidMountとcomponentunmount方法でsGroupFilterEventListnerを登録し、登録されていません。

現在のところ、誰かがURLバーに入力すると、フィルタパネルが自動的に変更されるケースも考慮していません。

上記のシナリオをすべて考慮して、同じことを行う一般的な方法を提案してください。ありがとう。

私の現在のフィルタPanleは、ここでは、この

Answer 1

のように見えるが、私はfilters配列で定義されたフィルタ（の動的な数のアップホイップ（のみなしReduxの反応していない）簡単な例ですが、当然、あなたはそれを獲得することができますどこからでも）。

https://codepen.io/akx/pen/JyemQQ?editors=0010

が、これは一緒にあなたのお役に立てば幸いです。