바보 자식에서 Redux 업데이트 상태에 반응하십시오

Question

바보 자식 구성 요소에서 부모 상태를 업데이트 할 수있는 방법이 있습니까? 나는 자식 (헤더와 본문)이있는 그리드 레이아웃을 가지고 있고, 헤더를 입력과 함께 필터로 사용하고 싶다. 부모 구성 요소와 함께 DB에 내 그리드를 연결하고 모든 데이터를 본문과 머리글로 전달하지만 헤더에서 연결된 스마트 구성 요소로 필터를 가져 오려고합니다. 내가 찾은 유일한 방법은 GridHeader를 연결하여 직접 데이터를 저장하고 전달하는 것입니다.

내 solutoin의 문제는 다른 데이터 형식의 다른 페이지에서 내 그리드를 사용하고자하므로 모든 그리드 구성 요소가 바보가되어야합니다. 내 솔루션으로 모든 데이터/테이블 형식에 대한 특정 GridHeader 작성하고 다른 저장소 키에 모든 헤더를 연결해야합니다. 하나는 users: store.users 등 ... 내 솔루션이 아니 DRY 것 catalog: store.catalog초에 연결 것이고 나는 그것을처럼 해달라고 :

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입니다 GridHeader에 대한 데이터를 제공합니다.

먼저 사용

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

두 번째 사용 : 예를 들어

당신의 GridHeader이 REDUX 저장소에 연결되지해야

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

, 단지 바보해야합니다.