Redux / React-Router-能够使用客户端路由发送带有参数的URL

Question

I'm looking to be able to have Redux populate state correctly when given a search parameter url.

Currently my flow goes as follows:

Search ->

<Redirect to={{
  pathname: '/search',
  search: `?item-name=${this.props.searchQuery}`
}} />

Which then redirects it to a /search component = {SearchResults}

In SearchResults, it is able to get items which were queried from the server due to a Redux action dispatching a GET Request.

return axios.get(`/api/search?item-name=${itemName}`)
   .then(response => {
   let json = response.data;
   dispatch(requestItemsSuccess(json));
}).catch(error => {
   dispatch(requestItemsFailure(itemName));
});

And therefore that object is available in Search Results by the Redux state since I've connected it.

function mapStateToProps(state) {
   return {
   // Gets the list of fetched items
   items: state.items.items
 };
}

If I were to give a friend https://mywebsite.com/search?item-name=foo my "items" state would be empty because it did not go through all the actions being dispatched, and therefore technically did not grab the information from my db.

Is there anyway I can allow this item information to be requested on entering the above url while still keeping Redux/Routing stuff done client-side?

Answer 1

This is similar to saying that when you refresh the page https://mywebsite.com/search?item-name=foo your axios call doesn't get fired.

What you'll need to do is create something like this:

componentDidMount() {
  const {items} = this.props; // assuming you can check whether items is populated

  if (!items) {
    this.props.dispatch(
     makeSearchResultsAxiosCall(this.props.location.query.item-name)
    )
  }
     // use this.props.location.query to access the query parameter
}

That should trigger the request if the page is refreshed or someone navigates directly to it.