ReactとReduxで検索オートコンプリートを実行するにはどうすればよいですか？

Question

私がどのように見えるHomeと呼ばれるコンポーネントいる：私のSearchInputがどのように見える

render() { 
    const clips = ObjectPath.get(this.props, 'search.data.clips.results', []) 

    return (
     <div className='search__container right-content-wrapper'> 
     <SearchInput 
      value={this.props.autocomplete.query.q} 
      placeholder='Search all the Vidys' 
      status={this.props.autocomplete.status} 
      hints={this.props.autocomplete.data} 
      onType={this.props.onAutocomplete} 
      onSubmit={this.props.onSearch} 
     /> 

     <SearchResults 
      results={clips} 
      location={this.props.location} 
      status={this.props.search.status} 
     /> 
     </div> 
    ) 
    } 

を：

render() { 
    const { value, hints, status } = this.props 
    const hasResults = hints.length 
    const areResultsVisible = hasResults && !this.state.hideAutocompleteResults && this.state.hasFocus 

    return (
     <div className= {`search-input__component ${status}`}> 

     {this.props.showLogo && (
      <a href="javascript:void(0);" className="logo-on-search"></a> 
     )} 

     <div className='input'> 
      <input 
      type='text' 
      className='input-field' 
      value={value} 
      placeholder={this.state.placeholder} 
      onFocus={::this.onFocus} 
      onBlur={::this.onBlur} 
      onKeyUp={::this.onKeyUp} 
      onKeyDown={::this.hanleArrowKeys} 
      onChange={::this.onChange} 
      /> 
     </div> 
     <button className="btn emoji"></button> 
     <button className='btn submit' onClick={() => this.onSubmit()}></button> 

     {(() => { 
      if (!areResultsVisible && false) return 

      const springConfig = { 
      stiffness: 600, 
      damping: 30 
      } 

      return <StaggeredMotion 
      defaultStyles={hints.map((item) => ({ x: -10, o: 0, z: 1.1 }))} 
      styles={(prevInterpolatedStyles) => prevInterpolatedStyles.map((_, i) => (
       i === 0 
       ? { 
        o: spring(1, springConfig), 
        x: spring(1, springConfig), 
        z: spring(1, springConfig) 
       } 
       : { 
        o: spring(prevInterpolatedStyles[i - 1].o, springConfig), 
        x: spring(prevInterpolatedStyles[i - 1].x, springConfig), 
        z: spring(prevInterpolatedStyles[i - 1].z, springConfig) 
       } 
      ))} 
      > 
      {(styles) => (
       <div className='hints'> 
       {styles.map((style, i) => (
        <div 
        key={i} 
        className={`hint${i === this.state.hintSelection ? ' selected' : ''} ${hints[i].type}`} 
        onClick={() => this.onHintClick(hints[i])} 
        onMouseEnter={() => this.setState({ hintSelection: i })} 
        style={{ 
         transform: `translateX(${style.x}px)`, 
         opacity: style.o 
        }} 
        > 
        <div className='hint-content'> 
         <div className='hint-title'>{this.highlightMatch(hints[i])}</div> 
         {(() => hints[i].type !== 'phrase' && <div className='hint-type'>{hints[i].type}</div>)()} 
        </div> 
        </div> 
       ))} 
       </div> 
      )} 
      </StaggeredMotion> 
     })()} 
     </div> 
    ) 
    } 

だから私は、私はもののトンを再構築する必要があることを認識し、私は探しています具体的な助けよりも一般的な指導。私は、Reactと、reduxには比較的新しいので、すべて理解できないかもしれません。私は何とかconnectをSearchInputに設定して実際の検索とオートコンプリートを行う必要があるように感じます。何か案は？

Answer 1

SearchInputコンポーネントは、（入力タグのonChange関数内の）入力タグの変更ごとにajaxリクエストを行う必要があります。 ajaxのコールバック関数では、新しいデータ（新しいヒント）は、そのデータでストアを更新するためにReduxアクションに渡す必要があります。 ストアのアップデートにより、ストアからの新しい小道具としての新しいヒントを持つコンポーネントの再レンダリングがトリガーされます。

検索テキスト自体は、入力タグのonChange関数のsetState関数を使用してコンポーネントの状態に格納する必要があります。 これは、単純な状態変数としてテキスト入力を取得するために、検索ボタンをクリックし、そのajaxリクエストでイベント関数をトリガした後に、検索のajaxリクエストを許可します。

検索ボタンをクリックした後に検索結果を更新する場合は、同じアーキテクチャを使用する必要があります。

幸運を祈る！