React Redux Url Change Events / Architecture - reactjs

Question

I'm building an application with React. If someone wants to search the following happens:
State is updated: this.props.Address.selectedAddress
Click on a search button the search event is trigger AND my URL is changed:
this.props.handleSearch(address);
let city = format_city(this.props.Address.selectedAddress);
browserHistory.push('/searchfor/'+city);
That works fine. Now I would like that a search event is also triggered if someone puts a new url in the application. What I did so far:
class ResultsList extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.unlisten = browserHistory.listen( (location) => {
console.log('route changes');
if (this.selectedAdressNOTMatchUrl()){
this.handelAdressSearch()
}
});
}
componentWillUnmount() {
this.unlisten();
}
Now the problem that the click event changes the url and the result list component thinks it have to handle this event: triggering search and updateting selectedAddress.
I really think it is a bad design how I have done it. Of course I could add a timestamp or something like this to figure out if browserHistory.push('/searchfor/'+city); happend right before the url change event is fired, but that is a bit ugly.
Every idea is appreciated!
Here is my setup:
export const store = createStore(
reducers,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
compose(
applyMiddleware(
thunkMiddleware,
promiseMiddleware()),
autoRehydrate()
)
);
const persistor = persistStore(store, {storage: localForage});
render(
<Provider store={store} persistor={persistor}>
<Router history={browserHistory}>
<Route path="/" component={Home}/>
<Route path="/searchfor/:city" component={Suche}/>
</Router>
</Provider>,
PS: One more remark
I tried react-router-redux. It saves the url state. BUT it doese not solve the issue. If for example I enter a new url. Then the Event LOCATION_CHANGE is fired. BUT short after that, my persist/REHYDRATE event is fired. So that the url changes back. That makes the behavior even worse...
PPS: To make it more clear. Everything works fine. I want to add one more feature. If the users enters a new url himself, then the application should handle this the same way if he clicked on the search button. BUT it seems a bid of hard, since in that case in my application the rehydrate event is fired...

Answer 1

Not sure how redux-persist ("rehydrating") works so maybe I'm missing something crucial.. But I'm thinking it could be possible to solve your issue through connecting your ResultsList component to Redux so that it passes the react-router url-parameter to it, something like this
// ownProps is be the props passed down from the Route, including path params
const mapStateToProps = (state, ownProps) => {
return {
searchTerm: ownProps.city, // the url param
results: state.searchResults // after a manual url entry this will be undefined
}
}
const mapDispatchToProps = (dispatch) => {
return {
handleSearch: searchTerm => dispatch(searchAction(searchTerm))
};
};
(That kind of code should be possible according to these docs here)
Then, inside the ResultsList, you could initiate the search.
componentDidMount() {
const {searchTerm, handleSearch} this.props;
handleSearch(searchTerm);
}
}
render() {
const {results} = this.props;
return !results ?
<p>Loading..</p> :
<div>
{ results.map(renderResultItem) }
</div>
}
That way the component would not have to care if the URL-param came from a manually entered url, or from a programmatically pushed URL from the search page.