How to access URL query string values in react router with Redux

Question

I have a URL as below with various querystring values.

http://localhost:3000/product/?id=123&name=test

I am working on isomorphic application using redux, react. So i am firing action and may i know how can i get these query string values to redux action file?

export function getProductData(params) {

  debug('Action Requested:' + params);  

  return {
    type:    GET_PRODUCT_DATA,
    promise: request.get(API_URL + params.productId)
  }
};

Because in action i am firing the API call and i need that ID from querystring value.

If You need to use response in action then dispatch in ajax callback not do promise in action. But I don't know if this is what You want to do. — Maciej Sikora
– Maciej Sikora, Commented Oct 8, 2016 at 15:46
This is isomorphic application, using this github.com/bananaoomarang/isomorphic-redux/tree/tutorial — kobe
– kobe, Commented Oct 8, 2016 at 15:48
My question is how to access the querystring values? if the url is like localhost:3000/product/1234, it is working as we code in the router like /product/:productid — kobe
– kobe, Commented Oct 8, 2016 at 15:49

The Dembinski · Accepted Answer · 2017-01-09 22:31:03Z

2

If you're using React-router, go ahead and access them via props.location.query

Would ultimately looks something like:

const Product = (props) =>
  <div>
     <button onClick={e => props.getProductData(props.location.query)}>Do Some Action</button>
  </div>;

answered Jan 9, 2017 at 22:31

The Dembinski

1,5191 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adidi · Accepted Answer · 2016-10-09 22:16:51Z

0

The parameters from the URL according to your routes are propagate to the component using props.params so if you have routes like

<Route path="/product/:productid" component={Product} />

you can access productid from Product Component using props and pass it to your action:

const Product = (props) =>
  <div>
     <button onClick={e => props.getProductData(props.params)}>Do Some Action</button>
  </div>;

where props.params holds all the parameters you define in the route. in our case value of productid will be in props.params.productid.

answered Oct 9, 2016 at 22:16

Adidi

5,2835 gold badges27 silver badges30 bronze badges

2 Comments

kobe Over a year ago

are querystring also going to part of that? if you have just /product/ and the URL comes as /product/?id=1234

The Dembinski Over a year ago

This answer doesn't address the question. Does not mention usage of the query string at all.

Collectives™ on Stack Overflow

How to access URL query string values in react router with Redux

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related