Forwarding from redux action in v4 reply router

Question

I used react-router v4 for routing in my application. There is a form on the home page. When the user fills out the form and removes the submit button, then the action is sent (showResultofCar), and it should be redirected to the results page, which is not a child of the home page, and another page with a different user interface from top to bottom.

I tried to do this, but the action was not sent, only the routing was transferred, but it displays the same home page instead of a new page (result)

index.js

 ReactDOM.render( <Provider store={createStoreWithMiddleware(reducers)}> <ConnectedIntlProvider> <Router> <App /> </Router> </ConnectedIntlProvider> </Provider> , document.querySelector('.app')); 

app.js

 render() { return ( <div className="container-fluid"> <Nav showModal={(e) => this.showModal(e)} hideModal={() => this.hideModal()} show={this.state.show} onHide={() => this.hideModal()} /> <Banner /> <Media /> <Footer /> </div> ); } 

form.js (this is a child component of the banner, which is a child component of the application)

 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 ( <div className="form-box text-center"> <div className="container"> <form className="form-inline" onSubmit={this.onSubmit}> <div className="form-group"> <Field name='Origen' component={renderGeoSuggestField} /> </div> <div className="form-group"> <Field name="daterange" onFocusChange={this.onFocusChange} /> </div> <Link to="/result"> <button type="submit" className="btn btn-default buscar"> { intl.formatMessage({ id: 'buscar.text' })} </button> </Link> </form> </div> </div> ); } 

Result-parent.js

 class ResultParent extends Component { render() { return ( <div className="result-page"> <Match pattern='/result' component={Result} /> </div> ); } } 

result.js

 class Result extends Component { render() { return ( <div className="result-page"> <ResultNav /> <Filtering /> <Results /> </div> ); } } 

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 method does not work. How can I now redirect the use of the react v4 router inside the action?

In addition, I do not want the result to be displayed inside the App component (parent), because the results page will be completely different from its own navigation, filtering and results options.

Note. Used React router v4

Answer 1

What you can do is make a redirect handler inside your App.js :

 constructor(props) { super(props); this.handleRedirect = this.handleRedirect.bind(this); this.handleSubmitForm = this.handleSubmitForm.bind(this); } handleRedirect() { this.props.push('/result'); } handleSubmitForm(cityFrom, cityTo, startDate) { this.props.showResultofCar(cityFrom, cityTo, startDate, this.handleRedirect); } ... 

And provide the form component handleSubmitForm through the details. This way, you don’t have to connect the Form component to Redux submit actions.

Inside the showResultofCar action , you can now call this Promise success redirector:

 export function showResultofCar(cityFrom, cityTo, date, redirectOnSuccess) { ... .then((response) => { // console.log('response is', response); dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data }); redirectOnSuccess(); }) ... } 

I know that this may not be the cleanest way, but it will work for you.

Answer 2

This video helped me understand how to use the new router: http://remzolotykh.net/crud-with-redux-06-server-side-validation-and-record-creation-part-2/