Change URL and call redux action to get the data in react redux application

Question

can anyone tell me how to call an action when you change the URL of the Route in server side react redux component with react-router for routing.

I am using browserHistory of react-router to push my inputs to url.

import React from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';

class findBirthdays extends Component {
  constructor(props){
    super(props);
  }

  openCalender(){
    // here I open the date picker and let user select the date
    // then I add that date in the URL as "localhost:3000/find/?date=22-02-2017"
    // here I get confused as I do not know now how to dispatch the action or
    // how to access url params in a specific actions after dispatching that action
  }

  render(){
    return (
      // repeating all the birthday that are available on selected date
    )
  }
}

const mapStateToProps = (state) => {
  return {
    birthdayList: state.birthdays,
  };
};

export default connect(mapStateToProps)(findBirthdays);

I have many inputs and on every input change event, will be appending the URL and that should lead to dispatching an action and getting the proper results.

I am new to react and redux, so if anyone can suggest if this can be done or how to approach this problem that would be helpful. Thanks guys.

Answer 1

Sorry guys I missed something in my code, I solved this by following ways,

1. Whenever I will change input I will dispatch an action and update the URL.
   • so in above example, I will dispatch an action in

openCalender() function after selecting the date.

2. When a user wants to change the URL manually then I handle that on the server side.
   • When user will change the URL and press enter that means server renders the whole new page.
   • I am dispatching a default action on page load with,

this.props.location.query

params, which provided by react-redux-router.