Saturday 7 December 2019

javascript - redirect from redux action in react router v4

I have used react-router v4 for routing in my application. In homepage, there is a form. When user fills up form and hits the submit button, then the action is dispatched(showResultofCar) and it should be redirected to result page which is not a child in the homepage instead it is a different page with different UI from top to bottom.



I tried to do this way but the action is not dispatched only the routing has been transitioned but shows the same homepage instead of new page(result)



index.js




ReactDOM.render(







, document.querySelector('.app'));



app.js



render() {
return (

showModal={(e) => this.showModal(e)}
hideModal={() => this.hideModal()}
show={this.state.show}

onHide={() => this.hideModal()}
/>




);
}



form.js(it is a child component of banner which is a child component of app)



onSubmit = (e) => {
e.preventDefault();
const originwithCountry = e.target.Origen.value;
const originwithCity = originwithCountry.split(', ')[0];
const cityFrom = base64.encode(originwithCity);
const startDate = (new Date(e.target.startDate.value).getTime() / 1000);
this.props.showResultofCar(cityFrom, cityTo, startDate);
this.context.router.transitionTo('/result');

}

render() {
const { focusedInput } = this.state;
const { intl } = this.props;
return (





name='Origen'
component={renderGeoSuggestField}
/>


name="daterange"
onFocusChange={this.onFocusChange}
/>








);

}


result-parent.js



class ResultParent extends Component {
render() {
return (




);
}
}


result.js



class Result extends Component {
render() {

return (





);
}
}



actions/index.js



export function showResultofCar(cityFrom, cityTo, date) {
return (dispatch) => {
dispatch({ type: 'CAR_FETCH_START' });
const token = localStorage.getItem('token');
console.log('date', date);
return axios.get(`${API_URL}/car/{"cityFrom":"${cityFrom}","cityTo":"${cityTo}","date":${date}}.json/null/${token}`)
.then((response) => {

console.log('response is', response);
dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
})
.catch((err) => {
dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
});
};
}



My way is not working. How can i now redirect using react router v4 inside action?



Also i don't want the result to be shown inside App component(parent) because result page will be completely different with its own navbar,filtering and results option.



Note: React router v4 has been used

No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...