redux mapdispatchtoprops state values of other components - redux

Question

This question may be silly, but for some reason I cannot find what I want to. I have a component which has two inputs, if any one of the input changes, I have to dispatch an action to saga to find some info from backend, so I have send both these values. When values are changed in one of the components I dispatch with new value and set it in redux store, for sending request to backend I need the other input value which is already set in redux store, how should I do this?
Below is the component and usecase, I want both duration and date values in change functions.
export class Options extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<div>
<SelectField
name={"duration"}
value={this.props.duration}
onChange={this.props.durationChanged}
>
<MenuItem key={1} value={1} primaryText={"option1"} />
<MenuItem key={2} value={2} primaryText={"option2"} />
<MenuItem key={3} value={3} primaryText={"option3"} />
<MenuItem key={4} value={4} primaryText={"option4"} />
</SelectField>
<DatePicker
value={this.props.date}
onChange={this.props.dateChanged}
/>
</div>
);
}
}
const mapStateToProps = createStructuredSelector({
date: makeSelectDate(),
duration: makeSelectDuration(),
});
function mapDispatchToProps(dispatch, a, b) {
return {
dispatch,
dateChanged: (any, date) => {
dispatch(changeDate(date));
//I want other duration value to dispatch an action to backend
},
durationChanged: (event, index, value) => {
dispatch(changeDuration(value));
//I want other date value to dispatch an action to backend
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Options);

Answer 1

I think, you need do:
1) Set only one prop "onChange" as function. And add props to define values on init. It like initValueDuration.
2) Set state with 3 fields
3) Add method onChange(state). This method will call: this.prop.onChange(this.state)

Answer 2

Say you have the two states duration, date in yourReducer. Then, you need two functions: durationChanged, dateChanged.
function durationChanged(newDuration) {
return (dispatch: Redux.Dispatch<any>, getState: () => RootState) => {
dispatch({
type: "DURATION_CHANGED",
payload: newDuration
});
const date = getState().yourReducer.date;
yourAsyncCallToTheBackEnd(newDuration, date);
...
}
}
function dateChanged(newDate) {
return (dispatch: Redux.Dispatch<any>, getState: () => RootState) => {
dispatch({
type: "DATE_CHANGED",
payload: newDate
});
const duration = getState().yourReducer.duration;
yourAsyncCallToTheBackEnd(duration, newDate);
...
}
}
In your mapDispatchToProps, you add
function mapDispatchToProps(dispatch: Redux.Dispatch<any>, ownProps: any): any{
return {
durationChanged: (newValue) => durationChanged(newValue),
dateChanged: (newValue) => dateChanged(newValue)
};
}
In yourReducer, you check the type of the action and change the corresponding state.
In your onChange handler of date input, you do this.props.dateChanged(event.target.value)
Checkout the redux-thunk