在选择器中访问反应路由器状态

我正将应用程序状态的一部分从存储移动到URL。在选择器中访问反应路由器状态

我目前使用REDX来管理我的应用程序的状态以及reselect来创建选择器。选择器从redux存储中的状态计算派生值（原则上，这是它们唯一的输入）。

现在，部分状态将包含在URL中，因此我不知道如何阅读它。

我已经看过react-router-redux，乍看之下可能会出现是解决方案（事实上，我可以得到我想用state.routing.locationBeforeTransitions.query值），但这似乎并没有要做到这一点的正道，因为在他们的文档中提到：

您不应直接从Redux存储区读取位置状态。

是否有另一种方式可以访问我的位置状态，或者我应该忽略此警告并在选择器中使用它？

来源

2016-09-21 Tom Fenech

您是否需要从mapStateToProps访问路由器的参数？ –

@Utro从那里调用选择器，但想法是只传递选择器一个参数，即状态对象。我想我可以添加我需要从路由器到状态对象使用ownProps ... –

有办法：1）在mapStateToProps中geting ownProps.params 2）在组件中：传递'this.props.params.someparam'到action 3）使用'redux-router'来保持路由器的状态。 –

您是正确的，react-router-redux文档似乎建议不要这样获取路由器状态。

虽然Reselect选择器通常只使用第一个参数（状态），但他们实际上可以接受第二个参数（组件的道具）。在这些道具里面，你会发现params被React Router传递（假设它们被传递给你正在尝试的组件connect）。

我已经包括以下所有我做的是上壳体内的location一个简单的例子，但你能想象让复杂的选择，只要你想，包括使用state得到的东西出了终极版的其他选择商店。

const selectLocation = (_state, props) => props.location; 
const selector = createSelector(
    selectLocation, 
    (location) => ({ upperCasedLocation: location.toUpperCase() }) 
); 

const MySmartComponent = (props) => <div>{props.upperCasedLocation}</div>; 

export default connect(selector)(MySmartComponent);

来源

2016-09-22 03:06:03

在选择器中访问反应路由器状态

回答

相关问题