React Redux update state from dumb child - reactjs

Question

Is there any way to update parent state from dumb child component? I have grid layout which has children (headers and body) and i want fo use headers as filters with input. I connect my grid to db with parent component a pass all my data down to body and headers, but i want to get filters from headers to connected smart component. Only way i found is to connect GridHeader to store and pass data directly to it.
Problem with my solutoin is that i want to use my grid in diferent pages with diferent data types so i need all my grid components to be dumb. With my solution i have to write specific GridHeader for every data/table type and connect every header to different store key. One would be connected to catalog: store.catalog second would be users: store.users etc...
My solution its not DRY and i dont like it :/ Please help
Here is my 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

You could create wrapper component which will be provide data for GridHeader. For example:
First usage
#connect((store) => {
return {
catalog: store.catalog
};
})
export default class FirstWrapperGridHeader extends React.Component {
render() {
<GridHeader {...props} />
}
}
Second usage:
#connect((store) => {
return {
catalog: store.anotherData
};
})
export default class SecondWrapperGridHeader extends React.Component {
render() {
<GridHeader {...props} />
}
}
Your GridHeader should be not connected to redux store,should be just dumb.