ダム・チャイルドからRedux更新状態に反応する

Question

ダム・チャイルド・コンポーネントから親状態を更新する方法はありますか？私は子供（ヘッダーとボディ）を持っているグリッドレイアウトを持っていると私は入力とフィルターとして使用するヘッダーをしたい。私は、親コンポーネントと私のグリッドをdbに接続し、すべてのデータをボディとヘッダーに渡しますが、ヘッダーからフィルターを接続してスマートコンポーネントに接続したいのです。私が見つけた唯一の方法は、GridHeaderを接続してデータを直接格納して渡すことです。

私のsolutoinの問題は、異なるデータ型の別のページで私のグリッドを使いたいので、すべてのグリッドコンポーネントをダムにする必要があるということです。私のソリューションでは、私はすべてのデータ/テーブルの種類のための特定のGridHeaderを書いて、別のストアキーにすべてのヘッダーを接続する必要があります。一つはcatalog: store.catalog秒に接続されるusers: store.users等... 私のソリューションそのDRYないことが、私はそれを好まないでしょう：/ここ

を助けてください、私のGridHeaderです：

import React from 'react'; 

import { connect } from 'react-redux'; 
import { filterCatalog, setFilters } from '../../redux/actions/catalogActions'; 

@connect((store) => { 
    return { 
     catalog: store.catalog 
    }; 
}) 
export default class GridHeader extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(e) { 
     const name = e.target.name; 
     let filters = { 
      [name]: e.target.value 
     } 
     this.props.dispatch(setFilters(filters)) 
    } 

    handleSubmit(e) { 
     if (e.which == 13){ 
      e.target.blur(); 
      //console.log('submit', this.props.catalog.filters) 
      this.props.dispatch(filterCatalog(this.props.catalog.filters)) 
     } 
    } 

    render() { 
     const headerItem = this.props.headers.map((x) => { 
      return (
       <th class={x.class} key={x.name}> 
       <div class="input-field"> 
        <input type={x.type} id={x.id} name={x.name} placeholder={x.placeholder} class={x.class} disabled={x.disabled} onChange={this.handleChange} onKeyPress={this.handleSubmit}/> 
        <label for={x.name}>{x.label}</label> 
       </div> 
       <a class="filter-button hidden"> 
        <i class="material-icons">backspace</i> 
       </a> 
      </th> 
      ) 
     }); 

     return (
      <thead> 
       <tr> 
        {headerItem} 
       </tr> 
      </thead> 
     ); 
    } 
} 

Answer 1

あなたはラッパーコンポーネントを作成することができますGridHeaderのデータを提供します。たとえば：

まず、使用

@connect((store) => { 
    return { 
     catalog: store.catalog 
    }; 
}) 
export default class FirstWrapperGridHeader extends React.Component { 
    render() { 
    <GridHeader {...props} /> 
    } 
} 

第2の使用：

@connect((store) => { 
    return { 
     catalog: store.anotherData 
    }; 
}) 
export default class SecondWrapperGridHeader extends React.Component { 
    render() { 
    <GridHeader {...props} /> 
    } 
} 

あなたGridHeaderはReduxのストアに接続されていないする必要があり、ちょうどダムでなければなりません。