I have general function for handling input onChange:
export function onChange(e) {
return (dispatch) => {
const payload = {};
payload[e.target.id] = e.target.value;
dispatch({
type: e.target.name,
payload
})
}
}
after some inputs changes (for ex. ones for set how much rows per table I want to fetch 30 or 60) I need to fire fetch function.
But when I'm calling fetch() function right after onChange - fetching is starting before onChange changes props that are part oof request url - request is incorect.
How do I handle such async actions to strt fetching after onChange changes the redux state
EDIT
the second function I want to call is
export function searchContacts(e, props) {
return (dispatch) => {
let propsReceived = props.allContacts;
let searchString = "?page=" + propsReceived.paginate +
"&orderBy=" + propsReceived.order +
"&sortedBy=" + propsReceived.sort +
"&limit=" + propsReceived.limit;
if(e){
let search = e.target.value;
searchString += "&search=first_name:" + search +";first_name:"+ search;
}
let url = ALL_CONTACTS + searchString;
return dispatch(getContacts(url));
}
And I'm calling these two function like that:
<select className="input-select select-contacts-nav"
onChange={(e)=>{
this.props.onChange(e);
this.props.searchContacts(null, this.props);
}}
value={this.props.allContacts.limit}
id="limit"
name="ALL_CONTACTS"
>
<option value="30"> 30</option>
<option value="60"> 60</option>
<option value="100">100</option>
</select>
But this.props.searchContacts starts before this.props.onChange
