如何使用Redux访问反应路由器中的URL查询字符串值

我有一个如下的URL和各种查询字符串值。如何使用Redux访问反应路由器中的URL查询字符串值

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

我正在使用redux，反应的同构应用程序。所以我射击行动，可能我知道我怎么可以得到这些查询字符串值减少行动文件？

export function getProductData(params) { 

    debug('Action Requested:' + params); 

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

因为在行动中我正在触发API调用，我需要来自querystring值的ID。

来源

2016-10-08 kobe

如果你需要用行动响应，那么在Ajax回调不分派在行动中承诺。但我不知道这是你想做什么。 –

这是同构的应用程序，使用此https://github.com/bananaoomarang/isomorphic-redux/tree/tutorial/ – kobe

我的问题是如何访问查询字符串值？如果url像localhost：3000/product/1234，它就像我们在路由器中的代码一样工作，比如/ product /：productid – kobe

根据你的路线从URL参数是使用props.params 传播到组件，所以如果你有一个像

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

你可以从Product组件使用道具访问的productid并将它传递给你的行动路线：

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

其中props.params包含您在路线中定义的所有参数。在我们的案例中，价值productid将在props.params.productid中。

来源

2016-10-09 22:16:51 Adidi

querystring也是这样的一部分吗？如果你只是/产品/和URL来作为/产品/？ID = 1234 – kobe

这个答案不解决这个问题。根本没有提及查询字符串的用法。 –

如果你使用的阵营路由器，继续通过访问这些props.location.query

最终会看起来像：

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

来源

2017-01-09 22:31:03

如何使用Redux访问反应路由器中的URL查询字符串值

回答

相关问题